homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

done switching to css
let's see if I get my cigar now

 9:47 pm on Dec 19, 2006 (gmt 0)

I finally gave in to all the good advice back here and

- got rid of my layout tables
- moved ALL formatting into the css file
- moved main content to the very beginning of the file by floating it
- made sure it validates and added a nice w3 icon with link
- used unnumbered list for navigation

and now I want me reward. Pronto ;-)

The site is in a fairly competitive niche and if this should help me, I'll become a true believer. What I can say for now is that I really like the lean code.




 10:46 pm on Dec 19, 2006 (gmt 0)

<script type="text/javascript">
var Fotiman = function(){
var cigar = {isLit:false};
return {
giveCigarTo : function( goodPracticioner ) {
goodPracticioner.takeCigar( cigar );
var the_nerd = function(){
var cigars = [];
return {
takeCigar : function( cigar ) {
cigar.isLit = true;
cigars[cigars.length] = cigar;
alert("Woo Hoo! I have " + cigars.length + (cigars.length==1?" cigar!":" cigars!") );
Fotiman.giveCigarTo( the_nerd );

Who's the nerd NOW?! ;-)


 10:54 pm on Dec 19, 2006 (gmt 0)



 8:20 am on Dec 20, 2006 (gmt 0)

Good stuff here's your reward from me, I think Fotiman definitely qualifies too :)

<style type="text/css" media="all">
.cigar {
background: url(cigar.gif) no-repeat 0% 0%;
visibility: hidden;

<!--[if gte the_nerd]>
<style type="text/css" media="all">
.cigar {
visibility: visible;
.cigar:before {
content: "Well Done! "



 9:38 am on Dec 20, 2006 (gmt 0)

- got rid of my layout tables
- moved ALL formatting into the css file
-moved main content to the very beginning of the file by floating it
- made sure it validates and added a nice w3 icon with link
- used unnumbered list for navigation

I don’t want to take your cigar away, just asking…when you say that you “moved main content to top of the page by floating it” to me that means that you changed, via css, your presentational layer such that user will see main text more towards the top of the screen then before (maybe it shows on the screen before, or on top of, some stuff that you had there before, etc.). When I think of “main text to the top of the page” I think of it how text browser, and hence current search engine spiders as well, sees the page. If you just ‘floated’ your main text then it still may not be on top of the page if you will. If you load your main text first (or just after some logo header), and then navigation, secondary text, etc., then your main text will be on top

For example following pages may look exactly the same in browser window

<div id=”logo”>

<div id=”main_text”>

<div id=”navigation_left_column”>

<div id=”other_column>

<div id=”footer”>


<div id=”logo”>

<div id=”navigation_left_column”>

<div id=”other_column>

<div id=”main_text”>

<div id=”footer”>


however just first example will have “main text” on top of page.

Or I just misunderstood what you said, in which case please enjoy your cigar :)


 5:35 pm on Dec 20, 2006 (gmt 0)


beginning of the file

thanks for your thoughts. I moved the main content to the top of the html FILE, in the faint hope that things closer to the start carry some more weight. The position on the screen didn't change, of course

and thanks a lot for all your cigars - I'll take them as an early Christmas present (We are still allowed to use this word over here ;-) ) - and motivation to carry on with CSS.

But ..... It sometimes gives me an headache or two. Looks like IE6, IE7 and Firefox do have completely different opinions when it comes to margins and paddings of floating divs. Maybe some of the even-nerdier-than-me people around know about those and wants to share (or share the location of a WW thread about this topics.

Thanks again

the "humble" nerd.


 6:35 pm on Dec 20, 2006 (gmt 0)

Looks like IE6, IE7 and Firefox do have completely different opinions when it comes to margins and paddings of floating divs

If , this time :) , I correctly understand you description you are referring to what is known as ‘box model’ . Here is post from the CSS forum library [webmasterworld.com] that describes the issue


Or using your favorite search engine, search for ‘box model', or 'browser box model’


 11:27 am on Dec 21, 2006 (gmt 0)

Hi Tastatura,

this time you're right on the point.

I do use a doctype (good boy) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

From all I read in the thread you mentioned the site should look alike on IE6, IE7 and Firefox. WEll IE7 and Firefox ARE the same (well, fonts look nicer on IE7) but IE6 behaves differently. For example a div floated to the right is AT the right side of the surrounding div, whereas IE6 doesn't seem to do this and has to be pushed right by using a left margin.

If there no ready answer to my ignorance, I strip down the whole layout to 3 simple boxes and see if I can reproduce it one different browsers - with nice background colors and borders.

cu later,


P.S. I grabbed and hid away my cigars but didn't dare light them so far :-)


 12:04 pm on Dec 21, 2006 (gmt 0)

You're using the wrong doctype :) That'll put IE into quirks mode and give you the issues you're having. I'd recommend HTML4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


 2:32 pm on Dec 21, 2006 (gmt 0)

Thanks, Robin ..

I tried that as well. Now all 3 browsers (IE6, IE7, Firefox 2) show a different rendering (ok, it's only +-15 pixels, but strict is strict ....) . AND the page doesn't validate anymore, because I use target ="_blank" for some links and <div align = "center"> for a wrapper div that should be centered on screen. All attempts to do this with text-align:center didn't work out.

Looks like I don't deserve any cigars yet....



 2:38 pm on Dec 21, 2006 (gmt 0)

the_nerd: your doctype is incomplete. It will put most browsers into quirk mode.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 3:58 pm on Dec 21, 2006 (gmt 0)

If you don't include the URI portion of the DOCTYPE, then IE will be in quirks mode, which is going to cause you headaches. It doesn't matter whether you're using strict or transitional, for either one you should be sure to include the URI. For example:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

As long as you include the URI, IE will not going into quirks mode.

As far as Strict vs. Transitional, generally speaking you should not be using the target attribute. You can accomplish the same behavior as a JavaScript enhancement, while keeping the content pure. But that's another topic.


 7:21 pm on Dec 21, 2006 (gmt 0)

Fotiman, like Robin_Reala had suggested I had used the strict stuff with the url, didn't work anyway.

I'll change the CSS file to see background colors and borders, so I don't have to guess anymore. I'll "report" back later.

Thanks to everybody for helping.


 10:50 pm on Dec 21, 2006 (gmt 0)

Try a "correct" transitional doctype (with URI).


 5:13 pm on Dec 22, 2006 (gmt 0)


that's what I did. Result: IE7 and Firefox 2 behave almost 100% identical.

But IE6 looks totally different in this way:

with this set-up

<div id ="maindiv">
<div id ="lefttop">
<div id ="righttop">
<div id ="leftbottom">
<div id ="rightbottom">
<div id = "contentdiv">
<div id = "menu">
</div> ..... </div>

maindiv has a background picture used to create a "faux-columns" 2 colums layout)
middle 4 divs have one rounded corner each
contentdiv (floatet to the right): main content
menu: (floatet to the left: navigation)

++++ sorry to bother you with the details, but after adding borders and background I'm really out of my wits (which doesn't mean a lot in this field ...)

so here's the css:

#maindiv {text-align:left; width:850px; background: url('pic/bgverlauf.gif') repeat-y;}
#lefttop {background:url('pic/coye_01.jpg') no-repeat top left;}
#righttop {background:url('pic/cogr_02.jpg') no-repeat top right;}
#leftbottom {background:url('pic/coye_03.jpg') no-repeat bottom left;}
#rightbottom {background:#F0F000 url('pic/cogr_04.jpg') no-repeat bottom right; border:1px solid blue;}
#menudiv {margin:15px 0px 15px 15px;width:150px;float:left;border:1px solid green;background:F0A0A0;}
#contentdiv{margin:15px 20px 10px 0px;padding-left:10px;width:620px;float:right;border:1px solid red;background:#EAEAEA;}

IE7 and Firefox 2 show what I expect:

px1 blue border (rightbottom)
px32 green border (menu)
px167 green border (menu)
px197 red border (content
px827 red border (content)
px 849 blue border (rightbottom)

But in IE6 I have this:

px1: blue border (div: rightbottom)
px32: green border (menU)
px 178 red border (content)
px 183 green border (menu)
px809 red border (content)
px 850 blue border (rightbottom)

that is, menu and content borders (178 - 183) do OVERLAP. (shouldn't one of them be pushed downwards in this case?)

And yes, I used this doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

If anybody sees my stupid errors, I'll be more than happy to share my cigars ;-)

the nerd. (eating humble pie...)


 12:23 pm on Dec 25, 2006 (gmt 0)


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved