First of all, stunned that I never saw this forum before, so many users, opinions,... great! Second my site looks good in IE and in Opera but not at all in Firefox. I use float for some parts but most is just basic divs under each other. The site is: http://www.kimwebsites.com/kim/ The CSS is: http://www.kimwebsites.com/kim/style.css If anyone can try and locate some wrong parts in it, that would be greatly appreciated. Eager to learn!
I think that the problem here is that Firefox is displaying the page correctly, while IE and Opera are not. When you add the 4px padding to homeleft, it is making the actual width of homeleft 444px, which is too wide to fit next to homeright. Now, IE is not working correctly because it is in "quirks" mode. That's because you don't have a doctype declared. Try inserting this at the very top of your html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> This puts IE into "strict" mode, so it displays pages correctly. Then adjust the width of homeleft to 428px. I think this will take care of it - let me know if not. To understand more about doctypes, check here: http://alistapart.com/stories/doctype/
Hey thanks for the reply. I'm almost there: there's now something with spacing or padding in the top images, and the footer line in the wrong place (both Firefox). Question: if I add 4px padding, what changes with the width exactly? +4px ? or + ... ?
Still facing the same problems after a few tries and changing more to validated code such as <p> and <h1> <h2> ... Index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Kim Websites: Open Platform voor Professionele Websites</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="center"> <img src="img/logo.jpg" alt="Logo Kim Websites"><img src="img/english.jpg"><img src="img/webcms1.jpg"><br /><img src="img/bedrijfswebsitecms995.jpg" alt="Logo Kim Websites"><br /><img src="img/tutorialstoolsencms.jpg" alt="Logo Kim Websites"> <h1><strong>Wat maakt ons uniek?</strong></h1> <p class="tekst">Kim Websites innoveert door zijn software, tools en tips gratis weg te geven. Enkel voor maatwerk betaal je...de laagste prijs.<br /> <a href="#" class="bluelink">Maak kennis met commerciële open-source</a></p> <div class="homeleft"> <h2><strong>PHOTOSHOP</strong></h2> <h1><strong>Tips voor een goede ranking</strong></h1> <p class="datum">29/03/2007</p> <p class="tekst">Er zijn enkele methodes die iedereen kan toepassen om de ranking of positie van zijn website te verbeteren bij zoekmachines. De tips die ik wil geven zijn geldig voor...</p><img src="img/knop.gif"> <br /> <h2><strong>PHOTOSHOP</strong></h2> <h1><strong>Tips voor een goede ranking</strong></h1> <p class="datum">29/03/2007</p> <p class="tekst">Er zijn enkele methodes die iedereen kan toepassen om de ranking of positie van zijn website te verbeteren bij zoekmachines. De tips die ik wil geven zijn geldig voor...</p><img src="img/knop.gif"> <br /> <img src="img/bouwmeeprogrammeurs.jpg"> <h2><strong>PHOTOSHOP</strong></h2> <h1><strong>Tips voor een goede ranking</strong></h1> <p class="datum">29/03/2007</p> <p class="tekst">Er zijn enkele methodes die iedereen kan toepassen om de ranking of positie van zijn website te verbeteren bij zoekmachines. De tips die ik wil geven zijn geldig voor...</p><img src="img/knop.gif"> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-3334368190667923"; google_alternate_color = "FFFFFF"; google_ad_width = 250; google_ad_height = 250; google_ad_format = "250x250_as"; google_ad_type = "text"; //2007-06-12: KimWebsites google_ad_channel = "3547524400"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "20BC0F"; google_color_text = "000000"; google_color_url = "1A7DE8"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class="homeright"> <div class="tabelkop"> <p class="kleinwit"><strong>Nieuwe Templates (Alle templates)</strong></p> </div> <div class="templates"> <br /> <div class="templatelinks"> <a href="gallery.php"><img border="0" src="img/template_001.jpg" /></a> <br /> <a href="gallery.php"><img border="0" src="img/winkelkarretje.jpg" /></a> <a href="gallery.php"><img border="0" src="img/vergrootglas.jpg" /></a> </div> <div class="templaterechts"> <a href="gallery.php"><img border="0" src="img/template_002.jpg" /></a> <br /> <a href="gallery.php"><img border="0" src="img/winkelkarretje.jpg" /></a> <a href="gallery.php"><img border="0" src="img/vergrootglas.jpg" /></a> <br /> </div> </div> <br /> <br /> <div class="tabelkop"> <p class="kleinwit"><strong>Download Kim Website 1.0</strong></p> </div> <div class="tabel"> <p class="tekst"> Content Management System gebaseerd op PHP en MySQL. Tal van functies: nieuws, columns, leden, online mailings, beveiliging, enquêtes,... </p> <p align="center"><img src="img/download.gif"></p> <a href="#" class="bluelink">Wij hosten en installeren voor € 9,95/maand</a> </div> <br /> <br /> <div class="tabelkop"> <p class="kleinwit"><strong>Betaalde diensten</strong></p> </div> <div class="tabel"> <p class="tekst"> > Professioneel ontwerp op maat<br /> > User-centered design<br /> > Zoekmachineoptimalisatie<br /> > Hosting<br /> > Beheer en onderhoud<br /> > Online mailings</p> <br /><a href="#" class="bluelink">Een professionele site voor uw bedrijf slechts € 995</a> </div> </div> <div class="footer"> <p class="tekst">© 2006-2007 VH Technology</p> </div> </div> </body> </html> PHP: And css body { padding: 0px; margin: 0px; text-align: center; } h1 { color: #1A7DE8; font-family: arial; font-size: 1.2em; margin: 0px; } h2 { color: #20BC0F; font-family: arial; font-size: 0.8em; margin: 0px; } h3 { color: #fff; font-family: arial; font-size: 0.85em; } p { margin: 0px; } div.center { padding: 0px; margin-left: auto; margin-right: auto; width: 796px; text-align: left; } .tekst { color: #000000; font-size: 0.75em; font-family: Arial; text-align: left; } div.home { margin: 0px; padding: 0px; width: 796px; } div.homeleft { width: 436px; margin: 0px; padding: 0px; float: left; text-align: left; } div.homeright { width: 360px; margin: 0px; padding: 0px; float: right; text-align: left; } div.tabelkop { width: 360px; height: 25px; margin: 0px; padding: 0px; background-image: url(img/tabelkop.jpg); } div.tabel { width: 360px; margin: 0px; padding: 0px; background-color: #ECEDEF; } .datum { color: #B8B8B8; font-size: 0.7em; font-family: Arial; text-decoration:bold; } .kleinwit { color: #FFFFFF; font-size: 0.85em; font-family: Arial; margin-left: 15px; } div.templates { width: 360px; height: 150px; margin: 0px; padding: 0px; background-color: #ECEDEF; } div.templaterechts { width: 150px; text-align: right; margin-right: 30px; padding: 0px; float: right; } div.templatelinks { text-align: right; width: 150px; margin: 0px; padding: 0px; float: left; } div.footer { border-top: 1px solid #4874D3; padding: 0px; width: 796px; text-align: right; } a.bluelink:link { color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;} a.bluelink:active { color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;} a.bluelink:visited { color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;} a.bluelink:hover { color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;} PHP:
Regarding the footer, this style should take care of it: clear: both; This will make sure that nothing can be floating next to the footer, thus pushing it down below the other content. As far as the padding, I believe that the total width = width you specify + padding + margin. So lets say you have a div with the styles width: 10px and padding: 5px, the total width will be 10+5+5=20px. Now, the problem with the top images probably has to do with the padding and/or margin not being specified somewhere. IE is a lot less picky with this, so you don't always have to specify. But, it's hard for me to tell just by looking at the page. Hope that helps . you can pm me if you need more help
Think I figured out the problem with the top imgs...it's not a padding/margin issue. There might be whitespace in your html: <img src="img/logo.jpg" alt="Logo Kim Websites"><img src="img/english.jpg"><img src="img/webcms1.jpg"> <br /> <img src="img/bedrijfswebsitecms995.jpg" alt="Logo Kim Websites"> <br /> <img src="img/tutorialstoolsencms.jpg" alt="Logo Kim Websites"> HTML: See how the br tags are on their own lines? That can cause gaps. There is also no need for a span around this html.
There are just gaps in your lines, not in mine (see above). Thing is when I delete the top line <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> there are no gaps anymore but as far as I understand that just means I accept "false" code instead of solving the actual problem? Edit: So i used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> instead and now it's fine. And it's valid right? So why not choosing that?
This is driving me nuts now...I did some searching, and this is all I could come up with: try adding this style declaration to the <img> tag: vertical-align: bottom; I made a quick test page and this did the trick. I'm not quite sure why, unfortunately. Someday, we will figure out this problem
Using an incomplete DTD or none at all puts browsers into a non-standards mode. There is no sane reason to write a new document that is not strictly valid. An image is an inline replaced element. If there is anything that triggers the formation of an inline box, text or even a white space, eg., the image will align itself to the inline box's baseline. The baseline is slightly elevated above the bottom of the inline box, leaving room for letter descenders, qypgj. Alignment is not treated the same in non-standards mode. The vertical-align property allows for adjustment within the inline box. Using {vertical-align: bottom;} is the most useful method to use, most of the time. You may also make the image block, either explicitly with {display: block;} or by floating it. Both of the latter methods have major gotchas, but may be the best thing in some particular situations. cheers, gary
To purposefully trigger a non-standards mode to fix what you don't understand is silly. Please upload a strict[1] working version of the page, with or without adjusting the vertical alignment of the images. We can find the real cause of the gaps. Creating pages that trigger non-standards rendering mode can and will cause more issues than anyone would care to deal with. If you learn the way things are supposed to work, you will not have these issues. cheers, gary [1] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Well said! Thanks for the explanation. gigafare, I actually took your code and images and made a quick test which worked in FF2 and IE6 (using vertical-align:bottom and strict doctype). Like Gary said, we will have to see the site with a strict doctype. Then we can be sure that everything is correct and it's not just a problem on your end.
Hey you're right: i put vertical-align: bottom; in img and it was solved, all IE, Opera and Firefox. Is the new Safari for Windows Opera/Mozilla, Firefox or IE related? Hey thanks you people for some in depth comments, I do wish to do everything as much open-standards as possible, truly and I think everyone should. It's just not always easy to understand why one doctype rules over another. should get myself a decent book probably. anyone dare to explain how come the sentence: Maak kennis met commerciële open-source is aligned to the right only in OPERA ? Perhaps 'cause it's still in the div center?
Glad we could help. I don't bother much with safari or opera so I cant help with your last questions. Personally, I think time is better spent on other tasks... Good luck