in my site's tutorial page, http://anothera.net/pstutorials.php , the first tutorial's heading is in the right place, but the second heading looks about 2px away from its correct spot. It looks fine in Internet Explorer but not in Firefox. please someone that know their CSS help me?
You're not resetting the margins/padding on every element, so each browser gives a different value. Use a universal reset like so: Get rid of the bottom negative margins on your header elements as well as floats, position:relative, spacer GIFs (<img src="spacer.gif" width/height), and start from there. Here's what I've edited with Firebug.. CSS: *{margin:0;padding:0;} #wrapper { margin: auto; width: 990px; position: relative; } #navtop { width: 990px; position: relative; float: left; background-image: url(images/top2_bg.gif); background-repeat: repeat; font-weight:bold; } #bt0 { float: left; width: 40px; position: relative; } #header { float: left; width: 990px; position: relative; } #randompicks { width: 990px; position: relative; float: left; } #navleft { float: left; width: 188px; position: relative; } .mspace { float: left; width: 12px; position: relative; } #content { margin: auto; float:left; width: 590px; position: relative; text-align:center; background-color:#b4b9ad; } #navright { float: right; width: 188px; position: relative; } #footer { margin: auto; float: left; width: 990px; position: relative; } /*other*/ #comments { width: 560px; position:relative; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-align:left; float:left; } #commentsform { padding-left: 20px; text-align:left; position:relative; font-family:Arial, Helvetica, sans-serif; font-size: 12px; } .commentsdesc { width: 100px; } a { color: #77943c; text-decoration: underline; } a:hover { text-decoration: none; } body { background-color: #010101; background-image: url("images/bgtop.gif"); background-repeat:repeat-x; } h1 { font-size: 30px; text-align:left; font-family: Arial, Helvetica, sans-serif; margin:0 0 15px 10px; width:490px; border-bottom:2px solid #626262; } .rule { margin-top: -8px; vertical-align:top; float:left; } h2 { font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:20px; color: #000000; margin:0 0 0 10px; text-decoration: none; border-bottom:2px solid #626262; } h2 a { text-decoration: none; color: #000000; } h3 { position:relative; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:20px; left: 20px; margin-top: 12px; margin-bottom: -34px; } /*news*/ .tnews { border-color: #626262; color: #626262; background-color: #b4b9ad; border-top: 2px; border-left: 0; border-right: 0; width: 550px; border-style:solid; position: relative; margin-left: 0.5em; padding: 0; float: left; } /* tutorials*/ .ttuts { background-color: #b4b9ad; color: #626262; width: 550px; position: relative; margin-left: 0.5em; float: left; } .ttutsthumb { width: 250px; position: relative; margin-top: 0.5em; margin-bottom: 0.5em; float: left; } .ttutsstats { width: 250px; position: relative; color: #000000; margin-top: 0.5em; margin-bottom: 0.5em; float: left; text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .ttutsdesc { width: 550px; position: relative; float:left; background-color: #626262; } .ttutdesctext { color: #c7c7c7; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-top: 0.4em; padding-bottom: 0.4em; padding-left: 1.2em; padding-right: 1.2em; text-align: left; float: left; } .tcaption { width: 550px; position: relative; float: left; background-color: #626262; text-align:right; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#c7c7c7; } .tcaption a { color: #a7c300; text-decoration: none; } .text01 { color: #000000; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-align:left; padding: 10px; } .text02 { color: #000000; font-family:Arial, Helvetica, sans-serif; font-size: 14px; text-align:left; margin-top: 5px; padding-left: 20px; padding-top: 10px; padding-bottom: 3px; padding-right: 20px; } .captiontext { text-align:right; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999999; padding-right: 10px; } .captiontext2 { text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#808080; padding-right: 10px; margin-top: 6px; } .tuttext { padding-top: 11px; padding-right: 108px; text-align: left; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px; color: #000000; } .rule2 { margin-bottom: -5px; padding-bottom: 5px; } /* quicklinks */ #navquicklinks { width: 188px; text-align:center; font-family:Arial, Helvetica, sans-serif; margin: 0; padding: 0; position:relative; float: left; } .quicklinks { background-color: #262626; border-top: solid 1px; position:relative; float: left; margin: 0; padding: 0; width: 188px; height: 24px; overflow:hidden; } .quicklinks a { width : 188px; height : 24px; color : #999999; text-decoration : none; display:block; overflow:hidden; } .quicklinks a:hover { background-color: #889f68; color: #000000; text-decoration : none; display:block; } .quicklinks img {width: 188px; height: 24px; border: 0; } * html a:hover {visibility:visible} .quicklinks a:hover img{visibility:hidden} .quicklinks span { font-family:Arial, Helvetica, sans-serif; font-size: 12px; position: relative; top: 6px;left:0px; text-align: center; width: 188px; cursor: pointer; } /*sponsors*/ #navsponsors { width: 188px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #999999; position:relative; float: left; background-color: #262626; } #sponsors { padding: 10px; } /*stats*/ #navstats { width: 188px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #999999; position:relative; float: left; background-color: #262626; } #stats { padding: 10px; } /*featured*/ #navfeatured { width: 188px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #999999; position:relative; float: left; background-color: #262626; } #featured { width: 180px; margin: auto; text-align: center; padding-top: 5px; padding-bottom: 5px; position:relative; } #featuredtext { padding: 7px; } /*poll*/ #navpoll { width: 188px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #999999; position:relative; float: left; background-color: #262626; } #poll { padding: 10px; } /*affiliates*/ #navaffiliates { width: 188px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #999999; position:relative; float: left; background-color: #262626; } #affiliates { padding: 10px; } /*contents*/ #contents { width: 568px; margin: auto; text-align: center; padding: 10px 0 0; position:relative; } .featuredtext { padding: 8px; text-align:left; font-family:Arial, Helvetica, sans-serif; font-size: 13px; color: #000000; } /* NAVIGATION BUTTONS */ .topnav { height: 36px; width: 912px; } #bt1 { position:relative; float: left; background: url("images/top2_off.gif") no-repeat; width: 130px; height: 36px; overflow:hidden; } #bt1 a { display: block; width: 130px; height: 36px; float: left; overflow:hidden; } #bt1 a:hover { background: url("images/top2_on.gif") no-repeat; text-decoration:none; } #bt1 img {width: 130px; height: 36px; border: 0; } * html a:hover {visibility:visible} #bt1 a:hover img{visibility:hidden} #bt1 span { font-family:Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; top: 10px; text-align: center; width: 130px; cursor: pointer; /* 2 */ } #bt2 { position:relative; float: left; font-family: arial, helvetica, sans-serif; background: url("images/top2_off.gif") no-repeat; width: 130px; height: 36px; overflow:hidden; } #bt2 a { display: block; width: 130px; height: 36px; float: left; overflow:hidden; } #bt2 a:hover { background: url("images/top2_on.gif") no-repeat; text-decoration:none; } #bt2 img {width: 130px; height: 36px; border: 0; } * html a:hover {visibility:visible} #bt2 a:hover img{visibility:hidden} #bt2 span { font-family:Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; top: 10px; text-align: center; width: 130px; cursor: pointer; /* 3 */ } #bt3 { position:relative; float: left; font-family: arial, helvetica, sans-serif; background: url("images/top2_off.gif") no-repeat; width: 130px; height: 36px; overflow:hidden; } #bt3 a { display: block; width: 130px; height: 36px; float: left; overflow:hidden; } #bt3 a:hover { background: url("images/top2_on.gif") no-repeat; text-decoration:none; } #bt3 img {width: 130px; height: 36px; border: 0; } * html a:hover {visibility:visible} #bt3 a:hover img{visibility:hidden} #bt3 span { font-family:Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; top: 10px; text-align: center; width: 130px; cursor: pointer; } /* 4 */ #bt4 { position:relative; float: left; font-family: arial, helvetica, sans-serif; background: url("images/top2_off.gif") no-repeat; width: 130px; height: 36px; overflow:hidden; } #bt4 a { display: block; width: 130px; height: 36px; float: left; overflow:hidden; } #bt4 a:hover { background: url("images/top2_on.gif") no-repeat; text-decoration:none; } #bt4 img {width: 130px; height: 36px; border: 0; } * html a:hover {visibility:visible} #bt4 a:hover img{visibility:hidden} #bt4 span { font-family:Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; top: 10px; text-align: center; width: 130px; cursor: pointer; } /* 5 */ #bt5 { position:relative; float: left; font-family: arial, helvetica, sans-serif; background: url("images/top2_off.gif") no-repeat; width: 130px; height: 36px; overflow:hidden; } #bt5 a { display: block; width: 130px; height: 36px; float: left; overflow:hidden; } #bt5 a:hover { background: url("images/top2_on.gif") no-repeat; text-decoration:none; } #bt5 img {width: 130px; height: 36px; border: 0; } * html a:hover {visibility:visible} #bt5 a:hover img{visibility:hidden} #bt5 span { font-family:Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; top: 10px; text-align: center; width: 130px; cursor: pointer; } /* 6 */ #bt6 { position:relative; float: left; font-family: arial, helvetica, sans-serif; background: url("images/top2_off.gif") no-repeat; width: 130px; height: 36px; overflow:hidden; } #bt6 a { display: block; width: 130px; height: 36px; float: left; overflow:hidden; } #bt6 a:hover { background: url("images/top2_on.gif") no-repeat; text-decoration:none; } #bt6 img {width: 130px; height: 36px; border: 0; } * html a:hover {visibility:visible} #bt6 a:hover img{visibility:hidden} #bt6 span { font-family:Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; top: 10px; text-align: center; width: 130px; cursor: pointer; } /* 7 */ #bt7 { position:relative; float: left; font-family: arial, helvetica, sans-serif; background: url("images/top2_off.gif") no-repeat; width: 130px; height: 36px; overflow:hidden; } #bt7 a { display: block; width: 130px; height: 36px; float: left; overflow:hidden; } #bt7 a:hover { background: url("images/top2_on.gif") no-repeat; text-decoration:none; } #bt7 img {width: 130px; height: 36px; border: 0; } * html a:hover {visibility:visible} #bt7 a:hover img{visibility:hidden} #bt7 span { font-family:Arial, Helvetica, sans-serif; font-size: 15px; position: absolute; top: 10px; text-align: center; width: 130px; cursor: pointer; } /* END OF NAVIGATION */ #contentfooter { float: left; width: 560px; position: relative; } Code (markup): HTML: (message exceeds 20k so I'll link to it) http://rafb.net/p/aZZhrE97.html You should be seperating structure from presentation. You're using spacer GIFs and setting the width and height manually on each image element that you add... this is what people did 5-10 years ago with tables. You should be using margin and padding to get the spacing, NOT inserting extraneous / useless image elements. You're giving some headers a value of relative for position and floating them, when all you need to do is set some margins, and possibly widths (like your h1). I got rid of your spacer GIFs (on the first two headers) and used the border property instead.
I usually don't make long (wait, that isn't long) posts.. most of the time I'm lazy but yeah I guess some of it is rubbing off... Damn I'm sleepy. That site needs to be re-coded.
It is quite typical of what I'm used to seeing for PHP based sites - SOMEHOW people seem to be learning php without first learning the language it needs in most cases to output. #header - no actual text, alt text is ignored, so you don't have a valid header on the page. It's a header, it should be a header tag. #navtop - it's a list of links, it should be formed using a LIST. Being they are all the same background with the text inside them showing over it there is NO need for the ID's on each button, and there's no reason for the spans either, and the title tag is pretty much universally ignored, and in this particular case adds NOTHING to the links. (as I always say, if you need a title tag the actual text inside your link needs replacement instead) #randompics - I'm assuming that's a placeholder image? #navleft - headers that aren't built with header tags, presentational images inlined, and two lists not marked up as lists. Spacer.gif's, inline level elements wrapping block level elements, wrapping DIV's around elements that don't need wrapping div's, 22 validation errors... I could go on for a bit on this one. That and if it's a new page it shouldn't be done in transitional. Though I THINK the pixel jog you are seeing is a float issue in IE, which MIGHT be able to be fixed by adding display:inline to the offending float, but I'm having trouble reverse engineering that from the lack of formatting in the code and the existing errors in the code.
wow i admire ur efforts... i'm really new with css thats why the sites probably crappy coded. It was my first css site to be honest and thanks dearly soulscratch for much help and advice. adding the global thing was amazing , it evened everything up. But it still looks different when viewed in firefox and internet explorer. um.. could you make it exactly how it looks, like right now? i tried your coding, and tried to modify it to suit the look, but it doesnt look the same T.T
last time i validated my site it had 0 errors lol , i guess the php scripts are making those errors ill go over them again i guess. ok so like all this information, while really good and i appreciate all your help is like giving me a headache. I mean should i like pay someone to re-code it? hey maybe you guys can help me , ill add your affiliate banner to your site or something if you can re-code it for me? edit: but you will need all the files cause there are a lot of ?php include lines ... and not to mention imbedded php scripts
This is how I'd have written that front page (as straight HTML): http://battletech.hopto.org/for_others/CixXy/template.html the directory http://battletech.hopto.org/for_others/CixXy is unlocked so you can grab the bits and pieces. Validates XHTML strict, works in IE 5, 6 & 7, FF, Opera and Safari. Many of the images got combined into single files and it uses a LOT less CSS and a hair less HTML, resulting in the page shedding about 60k, and reducing the number of files from 31 to 22 - reducing the page load time for dialup users from 38.8 seconds to 24.2 seconds. Also removes the 'lag' waiting for mouseover images to load since they are now a single image. I'm heading in for surgury today, but tonight if I have the time (and aren't loopy from the sedatives) I'll run through a line by line explanation of why I chose the tags and CSS I did.
.... you rock! the code looks so nice and awesome now... much thanks. I'll try to format it a bit more to suit the original look but man youve done a great job.. wanted to ask why is it that transitional xhtml isnt for my site? to be honest idk what transitional does anyway lol. 38.8 seconds to 24.2 seconds damn mate, that's just brilliant. well sucks to have to go surgery, but hope you're allright. how can i return the favour? do you own a site maybe i can put ur 88*31 banner?