> From: Aaron Rouse [mailto:[EMAIL PROTECTED]
> I'd run it through a few different resolutions. I do not
> keep my browser maximized so not sure what res it would be at
> but when I would go to view a product the layout was all out
> of wack unless I widen the browser by a good margin.
It's fine in IE (don't you just love IE when it's bugs actually trick
you into thinking everything is ok Will?) but things aren't so good
elsewhere. The logic is as follows:
You have a masthead div with a height of 125px. Inside that masthead you
have #leftbanner which has a padding-top of 45px. Inside that you have
your sitename heading which, based upon your font size and my screen
resolution, is taking up a height of 100px (you didn't specify it, but
that's just how big the box is based upon the text wrapping inside the
h1 tag - I used firefox's webdev toolbar to verify this). In total,
that means #leftbanner has a height of 145px and because its floated
inside a non-floated div, it bleeds out through the bottom. In turn,
that means your navigation (in Firefox, Opera, Mozilla) sits next to the
bottom of #leftbanner and is indented by its width (200px). IE with all
its flaws simply expands the masthead container (incorrectly) to allow
for #leftbanners extra height so your left navigation is correctly
positioned flush against the viewports edge.
There are two possible fixes here:
1. add a float to the masthead container:
#masthead{
float: left;
border-bottom: 1px solid #000000;
width: 100%;
height:125px;
background-color:#FFFFFF;
padding:0px;
}
OR
2. Use overflow to force the box to contain its children:
#masthead{
float: left;
border-bottom: 1px solid #000000;
width: 100%;
height:125px;
background-color:#FFFFFF;
padding:0px;
overflow: visible
}
/*hide from ie mac\*/
#masthead {overflow: hidden}
/*end hide\*/
In your case I think solution 1 is optimal and cleaner. Incidentally, IE
also has some rounding issues with floats so be careful when adding
things to total 100%. Unless it breaks the design it is safer to add
floats to 99.9% (e.g. give #rightbanner a width of 79.9%)
HTH
Mark
--
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four
times a year.
http://www.fusionauthority.com/quarterly
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:251443
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
