laczfinador Posted August 27, 2008 Share Posted August 27, 2008 Hello World!:)I have a very annoying problem here, and I don't know how to fix it.This here is the website:http://www.hgadmin.extra.hu/testing/index.htmlThe aim would be, to put the horizontal menu right under the #header image, without using position:relative/position:absolute. I am using FF3 under an Ubuntu Hardy Heron system, I din't know if that would be a problem, but because of this I couldn't see the page in IE6, so I don't know if this is a bug in FF or in my CSS skills:)I'd apprciate quick help, because I'm nearing the deadline :/note: I made some changes in the posted code, in comparison to the uploaded files, but I believe this should not be misleading in pointing out the source of my problem.HTML: <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="divcenter"><img id="header" alt="" src="design/header.jpg" /> <div id="navigation"> <a href="#">Le-Be-Nő</a> <a href="#">Info/Jelentkezés</a> <a href="#">Időpontok</a> <a href="#">Vendégkönyv</a> <a href="#">Blog</a> </div></div></body></html> and CSS: body{ background-color:#000000; }#divcenter{ width:698px; border-left:solid 1px #666666; border-right:solid 1px #666666; background-color:#ff0000;}#header{ margin:0px;} #navigation { background-image:url('design/navbg.jpg'); } #navigation a { margin:0px; } Link to comment Share on other sites More sharing options...
jeffman Posted August 27, 2008 Share Posted August 27, 2008 As far as I can see (FF3), the spaces that the diacritical marks fill is being interpreted incorrectly. That's where the "margin" is.I found a solution. Just change the background-color of divcenter to #ffffff. Most of it only shows for an instant while the image loads anyway. There may be other solutions. Link to comment Share on other sites More sharing options...
laczfinador Posted August 27, 2008 Author Share Posted August 27, 2008 As far as I can see (FF3), the spaces that the diacritical marks fill is being interpreted incorrectly. That's where the "margin" is.I found a solution. Just change the background-color of divcenter to #ffffff. Most of it only shows for an instant while the image loads anyway. There may be other solutions.Yes, well the red background is only temporary, to make it easier to notice positioning flaws:) Indeed, this would solve the "graphical" aspect of this problem, but...I actually managed to find another solution, by putting a properly sized <div> in the place of the <img> and gave it the same image, as a background-image CSS property. This is good, because it not only results in what I want to be seen, but it is also flawlessly positioned, but...:)We still don't know why is it acting "wrong" if I use an <img>? Does my CSS or HTML knowledge lack something critical about the <img> tag, or what? Link to comment Share on other sites More sharing options...
Jerry62704 Posted August 27, 2008 Share Posted August 27, 2008 Hello World!:)I have a very annoying problem here, and I don't know how to fix it.This here is the website:http://www.hgadmin.extra.hu/testing/index.htmlThe aim would be, to put the horizontal menu right under the #header image, without using position:relative/position:absolute. I am using FF3 under an Ubuntu Hardy Heron system, I din't know if that would be a problem, but because of this I couldn't see the page in IE6, so I don't know if this is a bug in FF or in my CSS skills:)I'd apprciate quick help, because I'm nearing the deadline :/note: I made some changes in the posted code, in comparison to the uploaded files, but I believe this should not be misleading in pointing out the source of my problem.HTML:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="divcenter"><img id="header" alt="" src="design/header.jpg" /> <div id="navigation"> <a href="#">Le-Be-Nő</a> <a href="#">Info/Jelentkezés</a> <a href="#">Időpontok</a> <a href="#">Vendégkönyv</a> <a href="#">Blog</a> </div></div></body></html> and CSS: body{ background-color:#000000; }#divcenter{ width:698px; border-left:solid 1px #666666; border-right:solid 1px #666666; background-color:#ff0000;}#header{ margin:0px;} #navigation { background-image:url('design/navbg.jpg'); } #navigation a { margin:0px; } Your page looked the same to me in FF3 and IE6. But it took 25 seconds in FF and 35 seconds in IE. I never go to pages that take that long. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.