CSS Float Display Problem

socoolbrewster · October 17th, 2005, 10:15 AM

I have recently moved over from TABLE layouts generated in Dreamweaver MX to table-less layouts using CSS, which is being put to use for a charity website I have been developing.

Although I now write RAW HTML and CSS, I still use Dreamweaver MX as an editor. The problem I have encountered is that my display for the current design (that uses FLOATS for positioning) displays incorrectly in the Dreamweaver preview - but ok in the likes of IE6+ and Firefox.

Does this mean my CSS is wrong? and I will encounter many problems in old browsers? Being new to using Floats I'm worried I have used them incorrectly to achieve my layout goal.

Could anyone advise?

The CSS used for the display is as follows:

Code:

* { padding:0; margin:0; }
body { 
       background-image: url("images/bg-grey.gif"); background-repeat: repeat; 
       background-color: #fff;
       font-family: "Lucida Grande", Verdana, Lucinda, Arial, Helvetcia, sans-serif; 
       font-size: 8pt; color: #999;
}       
div#container { background-color:#fff; color:#999; margin-left:auto; margin-right:auto; width:680px;  
    border-left-width:2px; border-left-color:#f90; border-left-style:solid;
    border-right-width:2px; border-right-color:#f90; border-right-style:solid;
    border-bottom-width:2px; border-bottom-color:#f90; border-bottom-style:solid;
    padding:0px 8px;
}

img { border:0; }

div#container div { margin-left:auto; margin-right:auto; width:670px; }

#header { height:15px; }
div#header p a { color:#999; text-decoration:none; background-color:#fff; font-size:7pt; font-weight:normal;}
div#header p a:hover { color:#000; text-decoration:none; background-color:#ff0; font-size:7pt; font-weight:normal;}
p#waylink { width:333px; float:left; text-align:left; padding-left: 2px; font-size:7pt; }
p#mydate { width:333px; float:right; text-align:right; padding-right:2px; font-size:7pt; }
div#logo { margin-bottom: 2px; }

a:link { color: #fff; text-decoration: none; font-size:11pt; background-color:#f90; font-weight:bold;}
a:visited { color: #fff; text-decoration: none; font-size:11pt; background-color:#f90; font-weight:bold; }
a:hover { color: #000; text-decoration: none; font-size:11pt; background-color:#ff0; font-weight:bold; }
a:active { color: #fff; text-decoration: none; font-size:11pt; background-color:#f90; font-weight:bold;}

#navigation { background-color:#f90; color:#fff; height: 20px; text-align:center; }
div#navigation a { padding: 0 3px;}

div#container div#content { margin-top:5px; margin-bottom:5px; background-color:#ccc; color:#000; width:650px;
     padding:10px; background-image: url("images/bg-grey.gif"); background-repeat: repeat;
}

h1, h2, p {margin-bottom:5px; }
h1, h2 , h3 { background-color:#fff; color:#f90; }
h1 { font-size:18pt; }
h2 { font-size:14pt; }
h3 { font-size:12pt; text-align:center; }
h4 { font-size:14pt; text-align:center; background-color:#fff; color:#999; }

div#content #leftcol { width:440px; float:left; background-color:#fff; color:#999; padding:5px; }

div#content #rightcol { width:180px; float:right; }
div#content #rightcol p { padding:5px; background-color:#fff; color:#999;}
div#content #rightcol strong { color:#999; background-color:#fff; font-size:14pt;}
.mycenter {text-align:center; }

#footer { margin-top:5px; height:20px; text-align:center; }
div#footer p { background-color:#f90; color:#fff; padding:3px 0;}

div#footer a { font-size:7pt; text-decoration:none; font-weight:normal; background-color:#f90; color:#fff;
}

div#footer a:hover { font-size:7pt; text-decoration:none; font-weight:normal; background-color:#ff0; color:#000;
}

#credits { margin-top:10px; height:20px; text-align:right; background-color:#fff; color:#999; font-size:7pt;}
#credits a, div#rightcol p a { font-size:7pt; text-decoration:none; font-weight:normal;
         background-color:#fff; color:#999;
}

div#credits img { vertical-align:bottom; }

#credits a { border-bottom:1px dashed #ccc; }

#credits a:hover, div#rightcol p a:hover { background-color:#ff0; color:#000; }

#credits a:hover { border-bottom:1px dashed #000; }

.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

* html .fixclear { height:1%;}
.fixclear { display:block; }

I would welcome any feedback

Gaz

Imar · October 17th, 2005, 10:34 AM

Although I haven't checked it, your CSS is probably not wrong.

Dreamweaver MX and MX 2004 have some serious problems with rendering CSS correctly, especially when positioning is involved. Dreamweaver renders more or less the way that IE does, but has a few quirks of its own.

The new Dreamweaver 8 version solves a lot of these rendering issues though.

If you develop in DW, make sure you do a lot of testing in IE, FireFox, Netscape, Opera and other browsers. Only then can you be sure your site looks good for the majority of users (this applies to web development in general and not to DW exclusively).

If you want DW to render your pages closer to (or identical) how they will end up in the browser, download a trial version of DW 8 and see if that works for you.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

socoolbrewster · October 17th, 2005, 01:18 PM

Hi

Thanks for your advise - I totally forgot about Dreamweaver MX 2004 CSS display issues in the design
window.

I have since been testing the site in browsers young and old - and have found a problem. In Opera 8 the container div for the 2 floated cols pushes to the left. Having ensured the width of the container takes into account the border, padding etc - not sure why it might do this?

Gaz

meow · October 17th, 2005, 01:50 PM

Hi! :)

For me, the code you posted looks the same in Opera and IE6.

--
http://yupapa.com

socoolbrewster · October 17th, 2005, 02:02 PM

When I view the site in Opera 8

The container DIV in the centre of the page containing the 2
floated DIV moves several px to the left side. Therefore the
grey shading for the FLOATS content container is not aligned centerally
with the other content.

Gaz

meow · October 17th, 2005, 02:12 PM

...so maybe you'd better show us the page with working images and scripts and whatnot instead? ;)

--
http://yupapa.com

richard.york · October 17th, 2005, 02:25 PM

Looks fine to me.

Opera and Mac Safari 1.3 show the same with it being two or three pixels slightly to the left. I wouldn't even have noticed if you hadn't mentioned it.

I've always been an advocate of position-based columns, as they are more consistent than floated columns. The trade off is some hacking is required to pull it off in IE 6.

I posted how to do this a while back, you can read that post here:
http://p2p.wrox.com/topic.asp?TOPIC_ID=29544

Otherwise you'll have to just play with it till you get it looking the same, or do the dreaded user-agent detection to single those browsers out for style adjustments.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

socoolbrewster · October 17th, 2005, 05:20 PM

Hi

I understand the benefits of ABSOLUTE positioning - Its just that I wanted to try a different method like FLOATS.

Also, with regard to your IE hacks within my CSS I have the following:

Code:

 

.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

* html .fixclear { height:1%;}
.fixclear { display:block; }

Which basically ensures the page footer is displayed
after the main content DIV containing the DIVs is placed after.

I do see the relevance of the other method. Its just that if I know why the page is displayed in OPERA that way, I can try to resolve it.

Which does confuse me a little, as the logo, nav and
footer bars etc all align correctly - so why would the main content area be any different?

Gaz

socoolbrewster · October 18th, 2005, 08:07 AM

I resolved my OPERA display issue. In my CSS i reset all the paddings and margins to 0
using the following CSS

Code:

 * { padding:0; margin:0; }

I forgot that this CSS should go after the BODY selector not before it. Anyway having changed the order it displays fine.

The only issue I have now, and it's kinda not CSS related is trying to find universal
HTML that will display a flash animation and is web standards based.

I currently use the following:

Code:

<object type="application/x-shockwave-flash" data="flash/solace-logo.swf" width="670" height="115">
<param name="movie" value="flash/solace-logo.swf" />
<img src="images/logo.jpg" width="670" height="115" alt="" />
</object>

The problem I discovered from a friend is that when the site is viewed in IE running on Win98
the animation is not display. Any ideas anyone?

Gaz

richard.york · October 18th, 2005, 09:02 AM

For your flash troubles:
http://www.alistapart.com/articles/flashsatay

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design