PDA

View Full Version : positioning images in Firefox


Jacquih
06-23-2006, 06:30 PM
I have a question about the home.jpg image (top left) on this page: http://www.habibihon.com/shahrzad/

In Firefox, it has some blank space above it that shouldn't be there, which changes the alignment with the rest of the page. It only happens when there is text in the "header" with the image.

Here are some code bits:
style:
body {
background-image: url(bg.jpg);
background-repeat: repeat-x;;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
color: white;
background-color: black;
font-family: Verdana, Arial, Sans-Serif;
text-align: center;
}
#header {
margin-left: 0px;
margin-top: 0px;
padding-top: 0px;
padding-left: 0px;
height: 100px;
}
#container {
text-align: center;
}

html:
<body>
<div id="container">
<div id="header">
<a href="index.html"><img src="home.jpg" align="left" alt="Home" /></a>

<p><a href="sale.php?items=sale">Sale Items!</a></p><br />
</header>

Thank you in advance for any help!
Diego
06-24-2006, 02:33 AM
this should fix it,
notice the float.
(tested in firefox worked good)

#header {
float:left;
margin-left: 0px;
margin-top: 0px;
padding-top: 0px;
padding-left: 0px;
height: 100px;
}

let me know how it works out
terryoleary1981
07-26-2006, 08:44 AM
Hi

I'm experiencing a similar problem to the one above, I have a header image that is contained in a banner div that has margin:auto to float in the middle, I have an image set as background in the banner div and a background image set to the body element, i need these two to line up correctly. in IE i have lined them up but in FF and safari (on mac platforms) the backgrounds do not line up a margin of about 7px appears in the banner div, i notice if i apply a border to the banner div then they line upand the margin dissappears but not otherwise. I cant use float as i need the banner to have auto margins. please check the site out at www.arcolectric.co.uk/index2.html any help or guidance is much appreciated!

- Terry