Forum Moderators: not2easy
- 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.
nerd.
<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 );
</script>
Who's the nerd NOW?! ;-)
<style type="text/css" media="all">
.cigar {
background: url(cigar.gif) no-repeat 0% 0%;
visibility: hidden;
}
</style><!--[if gte the_nerd]>
<style type="text/css" media="all">
.cigar {
visibility: visible;
}
.cigar:before {
content: "Well Done! "
}
</style>
<![endif]-->
Suzy
- 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>
<div id=”main_text”>
…
</div>
<div id=”navigation_left_column”>
…
</div>
<div id=”other_column>
…
</div>
<div id=”footer”>
…
</div>
<div id=”logo”>
…
</div>
<div id=”navigation_left_column”>
…
</div>
<div id=”other_column>
…
</div>
</div>
<div id=”main_text”>
…
</div>
<div id=”footer”>
…
</div>
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 :)
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.
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
[webmasterworld.com...]
Or using your favorite search engine, search for ‘box model', or 'browser box model’
HTH
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,
the_nerd.
P.S. I grabbed and hid away my cigars but didn't dare light them so far :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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....
nerd.
Try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
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.
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.
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>
<div id = "menu">
</div>
.....
</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...)
