This is the first time where IE has it right and firefox is messed up! Anyways, I am referring to my site www.swaythevote.com In firefox, the background image repeats a little after each expandable box. I am not sure why. I cannot fix it and I am not very good with css background tags. Any advice? The html code: <div class="content"> <img src="images/divtop.jpg" width="700" height="93" border="0" alt="divtop" /> TOP ISSUES RESULTS HERE IN TEXT AND GRAPHS <img src="images/divbottom.jpg" width="700" height="116" border="0" alt="divbottom" /></div> <div class="content"> <img src="images/divtop2.jpg" width="700" height="93" border="0" alt="divtop2" /> <dl class="info"> <dd class="info"> <ul class="info"> <li class="info">Crime</li> <li class="info">Economy</li> <li class="info">Education</li> <li class="info">Energy</li> </ul> </dd> <dd class="info"> <ul class="info"> <li class="info">Environment</li> <li class="info">Federal Budget</li> <li class="info">Healthcare</li> <li class="info">National Defense</li> </ul> </dd> <dd class="info"> <ul class="info"> <li class="info">Social Security</li> <li class="info">Taxes</li> <li class="info">Terrorism</li> <li class="info">Welfare</li> </ul> </dd> </dl> <img src="http://www.swaythevote.com/images/divbottom2.jpg" width="700" height="28" border="0" alt="divbottom2" /></div> </div> Code (markup): The CSS: .content { width: 700px; border: 0; background: #FFFFFF url(../images/divbg.jpg) repeat-y 50% 0; padding: 0px; margin: 0px; text-align: center; } .info dl { clear:both; width:728px; height:8em; margin: 0px auto; } .info dd { width:33%; float:left; margin:0 auto; } .info ul li { display: block; list-style-type: none; line-height: 30px; } Code (markup): Thanks in advance
Try this: HTML ... <div class="content"> <img src="images/divtop.jpg" width="700" height="93" border="0" alt="divtop" /> [B][COLOR="Red"]<p>[/COLOR][/B]TOP ISSUES RESULTS HERE IN TEXT AND GRAPHS[B][COLOR="Red"]</p>[/COLOR][/B] <img src="images/divbottom.jpg" width="700" height="116" border="0" alt="divbottom" /></div> ... Code (markup): CSS ... #main { width: 700px; background-color: #000000; margin: 20px auto; [B][COLOR="Red"]line-height: 0;[/COLOR][/B] } ... Code (markup):
Change doctype from strict to transitional, find thefollowing line at the very top of the page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code (markup): and replace with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Code (markup): This will fix the spacing problem.
I thought using strict doctype ensures that your code is clean and that you have minimal browser compatibility problems? Is there another way to fix it? There has to be...
Changing doctype from strict to tranny should NOT be fixing any layout issues here. Easing up on the redundant classes, using semantic tags PROPERLY (a DL for a menu that has no DT? /FAIL/) separation of your presentation from your content - now these are things that might help fix the layout. Of course, I'd also axe that STUPID malfing javascript - there's a REASON target was removed from the specification, and using a .js to get around that is ignoring the entire ******* point. Forcing a page to open in a new window is impolite and improper as you are overriding the normal behavior of the browser. (much apologizings - pet peeve) You should also probably be slicing up your images just a bit more than you are... This is probably how my HTML for that page would look: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="2008 elections, Joe Biden, Hillary Clinton, Christopher Dodd, John Edwards, Mike Gravel, Dennis Kucinich, Barack Obama, Bill Richardson, Sam Brownback, Rudy Giuliani, Mike Huckabee, Duncan Hunter, John McCain, Ron Paul, Mitt Romney, Tom Tancredo, Fred Thompson, Tommy Thompson, political issues" /> <meta name="description" content="Sway the Vote allows people to voice their opinions on which issues mean the most to them and how we can solve these issues." /> <!-- <link rel="stylesheet" type="text/css" href="screen.css" /> --> <title>Sway The Vote - Let your voice be heard about current politcal issues</title> </head><body> <div id="container"> <h1><a href="http://www.swaythevote.com/"> <i>Sway</i><b>the</b><strong>VOTE</strong>.com<span></span> </a></h1> <ul id="main_menu"> <li><a href="index.html">Home</a></li> <li><a href="">Issues</a></li> <li><a href="">Survey</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> <div class="content_box" id="voice"> <h2>Voice Your Opinion<span></span></h2> <div class="content"> <p>TOP ISSUES RESULTS HERE IN TEXT AND GRAPHS</p> </div> <div class="survey"><a href="#">Click Here to Begin Survey<span></span></a></div> </div> <div class="content_box" id="issues"> <h2>Issues!<span></span></h2> <div class="content"> <ul> <li><a href="">Crime</a></li> <li><a href="">Economy</a></li> <li><a href="">Education</a></li> <li><a href="">Energy</a></li> </ul> <ul> <li><a href="">Environment</a></li> <li><a href="">Federal Budget</a></li> <li><a href="">Healthcare</a></li> <li><a href="">National Defense</a></li> </ul> <ul> <li><a href="">Social Security</a></li> <li><a href="">Taxes</a></li> <li><a href="">Terrorism</a></li> <li><a href="">Welfare</a></li> </ul> </div> </div> <div id="footer"> Copyright 2007 Sway The Vote. All rights reserved. </div> </div> </body></html> Code (markup): First off make the header - a HEADER1 tag, including the actual text the image contains, toss some tags on that text to apply similar styling to the image appearance, and a empty span to actually apply the image over the text. The menu is ok, except there is NO need for that extra wrapper. Same for your content area, that extra #main wrapper isn't needed since you are doing single column. The two content boxes will likely share some appearance so you were right to give them the same class, but there's enough differences I'd also assign an ID. Again, you have a header with content, and as a image search engines are just not going to see them - so make those H2 tags and again set up a blank span for CSS image replacement. For consistancy we'll not inline any text without a wrapper in the DIV, this will let us apply specific padding to that element as needed... That 'survey' link we might as well set up for now - if we style that separate from the table and use some positioning tricks in the CSS we can reduce the size of that 'extra' image - same goes for the headers... if we apply an extra DIV around the content, we can skip ALL those pesky presentational image tags and instead apply the top to the H2, the bottom image to the actual #content_box container and the tiling to ".content_box .content" Finally the footer should be a block level tag. If I have some time in a couple hours I'll toss together the CSS for this and post up a working example.
Ok, here's how I'd make the CSS: http://battletech.hopto.org/for_others/wholesalechecklist/screen.css Which you can see working live with the images here: http://battletech.hopto.org/for_others/wholesalechecklist/template.html The directory as with all my examples is unlocked http://battletech.hopto.org/for_others/wholesalechecklist so you can grab the naughty bits - I 'remastered' and recut all the images reducing the total number of files to five, and they total about half the total filesize. Validates XHTML 1.0 strict, works identical in IE 6 & 7, Opera, Safari and FF. Does NOT work in IE 5.x - but frankly at this point we really need to stop bending over backwards to support that tired old beast. I'll type up a step by step explanation of the CSS the next time I have a few spare minutes.