[WSG] Trouble with H3 float
One more question please... When I resize http://geofeat.com/ to 800x600 the H3 heading *Featured Advertisers* (third heading on page content) floats right. I have tried all sorts of css to fix this but end up with more problems (specifically to do with excess top/bottom margins in the heading etc). Any help greatly received :( -- XERT Communications email: [EMAIL PROTECTED] mobile: 0438 017 416 http://www.xert.com.au/ web development : digital imaging : dvd production *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Trouble with H3 float
Sarah Peeke wrote: When I resize http://geofeat.com/ to 800x600 the H3 heading *Featured Advertisers* (third heading on page content) floats right. There is a nice, easy fix to this Sarah. It looks like the problem you are having is that the 3 three divs above it are floated. When you float elements like this they behave a bit like (but not exactly like) inline elements. Content after them doesn't treat them like you would expect with block level elements, and will try and fit in to any gaps that are left after the floats are positioned. In this situation, at most resolutions the divs are all the same height, and so the next available gap for the h3 is below them. At the 800x600 resolution the middle div has a larger height due to the content, which leaves a small gap below the right hand div for the h3 to squeeze in to, which makes it look like it has been floated right. All you need to do is add a clear: left; rule to the style of the h3, or even better apply a self clearing float method (http://www.positioniseverything.net/easyclearing.html) to a container of the three divs. This means that you can put anything after the floats (and not just a specific h3) and it will appear below them. Ian. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Trouble with H3 float
I haven't looked at the code of the site properly so forgive me if this
doesn't work...
You can apply the CSS property
{
clear: both
}
to the H3 heading.
Sarah Peeke (XERT) wrote:
One more question please...
When I resize http://geofeat.com/ to 800x600 the H3 heading *Featured
Advertisers* (third heading on page content) floats right.
I have tried all sorts of css to fix this but end up with more problems
(specifically to do with excess top/bottom margins in the heading etc).
Any help greatly received :(
--
Christian Fagan
Fagan Design
fagandesign.com.au
[EMAIL PROTECTED]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Trouble with H3 float
Hi Christian Ian,
I haven't looked at the code of the site properly so forgive me if
this doesn't work...
You can apply the CSS property
{
clear: both
}
to the H3 heading.
I have tried the clear: both; and clear: left; options.
But I get a margin problem which differs across browsers (IE versus FF).
Placing a margin: 0; doesn't appear to help.
Can you please enlighten me?
Thank you
Sarah
--
XERT Communications
email: [EMAIL PROTECTED]
mobile: 0438 017 416
http://www.xert.com.au/
web development : digital imaging : dvd production
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Trouble with H3 float
Sarah Peeke wrote: I have tried the clear: both; and clear: left; options. But I get a margin problem which differs across browsers (IE versus FF). Placing a margin: 0; doesn't appear to help. Hi Sarah, Your email doesn't say what the specific margin problem you are having is, but I am guessing it is the space between the three floated divs and the h3. It looks like the difference you are seeing is because Firefox and IE7 are not exactly the same when it comes to the heights of the floated divs at the reduced size. The distribution of the content is slightly different between the browsers. Therefore I would suggest that the different margins are being caused by the margin-bottom: 2em; rule on the floated divs, with class 'bl'. I've tried removing the bottom border with web developer toolbar in both Firefox and IE7 and it looks more consistent, but because in Firefox the left floated div is the longest and in IE7 the middle div is the longest (at least in my browsers) the perception of the space is distorted a bit. Although absolute consistency across browsers is something to be aspired to, sometimes you will have to accept minor differences. If pixel perfection of the spacing is critical to you in this case then I suggest conditional comments, or some other method of feeding different margin values to IE. Ian. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Trouble with H3 float
Sarah Peeke (XERT) wrote:
One more question please...
When I resize http://geofeat.com/ to 800x600 the H3 heading *Featured
Advertisers* (third heading on page content) floats right.
I have tried all sorts of css to fix this but end up with more problems
(specifically to do with excess top/bottom margins in the heading etc).
Any help greatly received :(
Well, I ain't so sure I get what you are trying to do, but anyway try:
h3.c1 { font-size: 150%; background-color: red; clear: left; }
h3 class=c1Featured Advertisers/h3
Best,
~dL
PS Nice site.
--
http://chelseacreekstudio.com/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Trouble with H3 float
The problem is that in Firefox (and other similar browsers), when
elements are floated (in your case the div class=bl last), the
containing div has a height of 0. In IE, the height is always
adjusted to fit in the floated divs.
What you need to do is set the height of the divs so that, at least, you
can control the element underneath (the H3) and the heights will behave
the same in both browsers.
ie.
#containerForFloatedDivs
{
min-height: 15em; _height: 15em;
}
The min-height attribute works for most major browsers other than IE.
And the _height attribute is an IE specific hack that is not read by
proper browsers like Firefox, Mozilla, Opera, etc.
On a side point, you probably don't need so many different classes of
divs to display these elements. I suggest maybe the following layout:
div id=containerForFloatedDivs
div class=floatedDiv
content 1
/div
div class=floatedDiv
content 2
/div
div class=floatedDiv
content 3
/div
/div
Maybe there is some specific reason for having 4 nested divs to display
this content but you might want to consider this approach.
Hope this helps
Sarah Peeke (XERT) wrote:
Hi Christian Ian,
I haven't looked at the code of the site properly so forgive me if
this doesn't work...
You can apply the CSS property
{
clear: both
}
to the H3 heading.
I have tried the clear: both; and clear: left; options.
But I get a margin problem which differs across browsers (IE versus FF).
Placing a margin: 0; doesn't appear to help.
Can you please enlighten me?
Thank you
Sarah
--
Christian Fagan
Fagan Design
fagandesign.com.au
[EMAIL PROTECTED]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Trouble with H3 float
u can solve the problem with different margins in IE and FF,
one of the solutions:
1. wrap those 3 floated divs(.bl) before h3 (additional wrapper div) let it
be class=suppa-wrapper
it would look like this
div class=suppa-wrapper
div class=bl
/div
/div
2. Set this CSS on it
.suppa-wrapper{
width:100%;
overflow:hidden;
}
And now u can remove clear:both for the h3
On 3/28/07, ~davidLaakso [EMAIL PROTECTED] wrote:
Sarah Peeke (XERT) wrote:
One more question please...
When I resize http://geofeat.com/ to 800x600 the H3 heading *Featured
Advertisers* (third heading on page content) floats right.
I have tried all sorts of css to fix this but end up with more problems
(specifically to do with excess top/bottom margins in the heading etc).
Any help greatly received :(
Well, I ain't so sure I get what you are trying to do, but anyway try:
h3.c1 { font-size: 150%; background-color: red; clear: left; }
h3 class=c1Featured Advertisers/h3
Best,
~dL
PS Nice site.
--
http://chelseacreekstudio.com/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Yuriy akella Artyukh,
http://cssing.org.ua
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Trouble with H3 float
Sarah Peeke (XERT) wrote:
When I resize http://geofeat.com/ to 800x600 the H3 heading
*Featured Advertisers* (third heading on page content) floats right.
If you don't want to run into more serious problems, the addition of...
h3 {clear: both; }
...is a must.
All differences that may occur after that addition, are caused by the
'Layout' bug in IE/win and should be dealt with in IE/win only. No need
to disturb good browsers because of IE's bugs.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
