Issues with Explorer and CSS

Get Started
1

I’m making my first website using graphics from photoshop that I made from scratch. I’m now having issues with IE rendering the site differently than firefox.

For some reason, IE puts about a 5px space between my body image and my footer image, but firefox doesn’t.

Can somebody help me please?

I’m a noob so be gentle…

This is my html


<!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>
		<title>Original Gangster Burgers Inc</title>
		<meta http-equiv="Content-Type"
			content="text/html; charset=iso08859-1" />
		<link rel="stylesheet" type="text/css" href="styles.css" />
	</head>

	<body>
		<div id="header">
			<img src="images/header.jpg" height="260px" width="1000px" alt="Original Gangster Burgers Inc">
			<div id="header-nav">
				<ul>
					<li class="homenav"><a id="homenav" href="http://www.originalgangsterburgers.com/index.html">                       </a></li>
					<li class="aboutusnav"><a id="aboutusnav" href="http://www.originalgangsterburgers.com/aboutus.html"><img src="images/aboutusnav.png"></a></li>
					<li class="menunav"><a id="menunav" href="http://www.originalgangsterburgers.com/menu.html"><img src="images/menunav.png"></a></li>
					<li class="photosnav"><a id="photosnav" href="http://www.originalgangsterburgers.com/photos.html"><img src="images/photosnav.png"></a></li>
					<li class="directionsnav"><a id="directionsnav" href="http://www.originalgangsterburgers.com/directions.html"><img src="images/directionsnav.png"></a></li>
					<li class="contactusnav"><a id="contactusnav" href=http://www.originalgangsterburgers.com/contactus.html""><img src="images/contactusnav.png"></a></li>
				</ul>
			</div>
		</div>
		<div id="body">
			<img src="images/body.jpg" height="409px" width="1000px" alt="">
			<div class="scroll">
				<h1>
					Under Construction!  
			</div>
		</div>
		<div id="footer">
			<img src="images/footer.jpg" height="131px" width="1000px" alt="">
		</div>

	</body>
</html>

This is my stylesheet:

body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  color: #000000;
  font: 1em Helvetica, Arial, Verdana, sans-serif;
}



#header {
  position: absolute;
  top: 0px;
  left: 30px;
}



#body {
  position: absolute;
  top: 260px;
  left: 30px;
}


#footer {
  position: absolute;
  top: 669px;
  left: 30px;
}



#header-nav {
  position: absolute;
  top: 222px;
  left: 125px;
  display: block; 
  width:1000px; 
  height:20px;
}

#header-nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#header-nav li {
  float: left;
}



#header-nav a#homenav {
  background: transparent url(images/homenav.png) 4px 4px no-repeat;
  display: block; 
  width: 40px; 
  padding-top: 25px; 
  margin-right: 51px; 
  height: 0; 
  color: #000; 
  text-decoration: none; 
  overflow: hidden;
}

#header-nav a#aboutusnav {
  background: transparent url(images/aboutusnav.png) 4px 4px no-repeat;
  display: block; 
  width: 65px; 
  padding-top: 25px; 
  margin-right: 48px; 
  height: 0; 
  color: #000; 
  text-decoration: none; 
  overflow: hidden;
}

#header-nav a#menunav {
  background: transparent url(images/menunav.png) 4px 4px no-repeat;
  display: block; 
  width: 39px; 
  padding-top: 25px; 
  margin-right: 55px; 
  height: 0; 
  color: #000; 
  text-decoration: none; 
  overflow:hidden;
}

#header-nav a#photosnav {
  background: transparent url(images/photosnav.png) 4px 4px no-repeat;
  display: block; 
  width: 53px; 
  padding-top: 25px; 
  margin-right: 50px; 
  height: 0; 
  color: #000; 
  text-decoration: none; 
  overflow: hidden;
}
#header-nav a#directionsnav {
  background: transparent url(images/directionsnav.png) 4px 4px no-repeat;
  display: block; 
  width: 77px; 
  padding-top: 25px; 
  margin-right: 35px; 
  height: 0; 
  color: #000; 
  text-decoration: none; 
  overflow: hidden;
}
#header-nav a#contactusnav {
  background: transparent url(images/contactusnav.png) 4px 4px no-repeat;
  display: block; 
  width: 80px; 
  padding-top: 25px; 
  margin-right: 1px; 
  height: 0; 
  color: #000; 
  text-decoration: none; 
  overflow: hidden;
}







a:link {
  color: transparent;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: transparent;
  background-color: transparent;
  text-decoration: none;
}

#header-nav a#homenav:hover {
  background: transparent url(images/homehover.png) 0 0 no-repeat;
}
#header-nav a#aboutusnav:hover {
  background: transparent url(images/aboutushover.png) 0 0 no-repeat;
}
#header-nav a#menunav:hover {
  background: transparent url(images/menuhover.png) 0 0 no-repeat;
}
#header-nav a#photosnav:hover {
  background: transparent url(images/photoshover.png) 0 0 no-repeat;
}
#header-nav a#directionsnav:hover {
  background: transparent url(images/directionshover.png) 0 0 no-repeat;
}
#header-nav a#contactusnav:hover {
  background: transparent url(images/contactushover.png) 0 0 no-repeat;
}
* html #menu a:hover {height:128px; he\\ight:0;}




a:active {
  color: transparent;
  background-color: transparent;
  text-decoration: none;
}



.scroll {
position: absolute;
top: 0px;
left: 100px;
height: 410px;
width: 790px;
overflow: auto;
border: 0px
background-color: transparent; 
padding: 0px;
}



h1 {
  position: relative;
  top: 0px;
  left: 0px;
  display: block; 
  color: #000000;
  font: 2em Helvetica, Arial, Verdana, sans-serif;
}
2

A couple of things:

  1. your h1 is missing the closing tag
  2. I would suggest you use html 4 doctype and markup, which means no /> at the end of meta (but there’s far more difference between the two then you’d have thought). if you do decide to continue with xhtml doctype, then you also need to img to self close, i.e. />
  3. you really shouldn’t use position:absolute, only if absolutely necessary
  4. Sitepoint has a dedicated CSS forum, there is an “important” thread which covers layouts (3 columns, but you get other layouts there as well.)
3

Different browsers apply different default settings - I start my CSS out with * {margin: 0; padding: 0;}. Then I add them back in as needed.

Also, in your CSS you set you background color and your font color the same. It’s so hard to read black on black :slight_smile:

4

That’s the rule, not the exception, so don’t feel bad. IE is a horrible browser, technically speaking.

5

I use an image as my background, that’s why I set the font color to black. The image fades to black so my background color is black also.

You can view the markup at originalgangsterburgers (d.o.t.)c.o.m
It’s just the image, no code yet

I still don’t know how to fix this problem with IE messing up the position…

If I’m not supposed to use position: absolute, how the heck would I position my images to be the backgrounds?? I used one image background I made on css and spliced it into 3 sections
header, body and footer.

Any ideas?

6

if your images are supposed to be background, then that’s where they belong, in the background.

I use an image as my background, that’s why I set the font color to black.

and what about those that have images turned off? Besides Google&Co can identify if you have black on black or similar, which was a common SEO black hat tactic.

Here’s the proper link but without code it’s pretty pointless: http://originalgangsterburgers.com/

7

I know it’s the proper link, they wouldn’t let me post a link because I haven’t posted enough times.

So I should put the entire image as a background image and just code over top of it?

If I want my background color to be black, and I still want the font to be black because the image that I’m using at the background is an off white colour so I want black for it.

The store’s colours are red white and black so they wanted that incorporated into their website.

I work there part time and they just opened up a few months ago so I offered to make them a simple website.

8

I know that, that’s why I posted the link, I’m not a mod otherwise I’d have edited your post.

If the entire image is considered to be background, then yes.

Just consider what we’ve said and see whether you can implement it. Most of the times you can work around it, but I don’t really see about which part you’re talking so come back when you’ve got your code up.

9

thanks for your patience. I’m about to post the code that I have now.

I got it to work on explorer, it looks like it was just that closing header tag that I forgot which threw off IE but not firefox lol
sheesh

If a user has images disabled, does the background image not show up also? I’m asking because I’d be stuck then… I want the background image to blend into a black background but I want to use black font. I’m a real noob :frowning:

10

if images are turned off then no images will be displayed, no background images. Also consider how it looks when printing it off (forgot this) but you can create a separate stylesheet for this.

11

code is up :slight_smile:

so for images off, I can create a separate stylesheet and link to it say at the top of the page?

12

nope just for printing.

13

okay, I can see now where your “problem” is. It’s the way you sliced the images.

Have a look at mint.com and how they are doing it, I’d recommend to follow the same style, but that would probably mean that you’d have to change your main text background to something more homogeneous (which I would recommended anyway - the other design suggestion I have is the Gangster Burgers, the Original is easy to read but this part is almost invisible but that’s up to you).

http://www.mint.com/images/global/body.jpg
http://www.mint.com/images/global/footer.jpg

I’m rubbish at explaining, so I hope that makes sense already, if not use Firebug to see how they’ve done the CSS.

14

That’s a really nice site. Puts me to shame lol

Thanks for all the advice - looks like I have lots of tweaking to do :slight_smile:

I’ll put this up for now at the request of the store owner but will continue to make those changes.

Thanks guys!

15

First, Welcome to SitePoint dynamic.flare

Regarding content images.

An image is an inline element (actually a replaced inline element) but don’t need a text line to sit on by it self (as text would). But when placed in a text block the image bottom sits on the base-line level of the text-line, i.e. the same level as the regular letters. Below the base-line is room for descending letters like g p …

The reason to the space is that IE always let the image have a text line to sit on even when there is no text. (Test changing the text size in IE and see the space change too.)

Solution for IE is to either remove the text-line by floating or display block the image, or vertically align the inline displayed image to bottom of the text-line, depending on the situation.

img {
   display: block;
}

img {
   vertical-align: bottom;
}
16

Your </html tag is missing the ‘>’

17

you might want to run that page through

http://validator.w3.org/

  • there are a few easy correctable errors there