Jump to content

CSS margin problem


laczfinador

Recommended Posts

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...