Help with CSS code

gwmbox

01-10-2008, 11:55 PM

Hi guys

Having an issue with some code that I need help with. Works with Firefox but not with IE.

HTML

<body>

<div align="center">
<div id="wrapper">

<div id="header">
<div id="headertitle"><img src="includes/images/headertitle.jpg" alt="Darksky Alaskan Malamutes" name="Darksky Alaskan Malamutes" id="Darksky Alaskan Malamutes" width="841" height="113" border="0"></div>
<div id="headerright"></div>
</div>
</div>
</div>
</body>

Now the CSS

/* Base Styles */

body
{
font: 62.5%/1.5 Verdana, Geneva, Arial, Helvetica, sans-serif;
background-image: url(../images/bg.png);
margin: 0px;
padding: 0px;
}

#wrapper
{
width: 85%;
background-color: #FFFFFF;
max-width: 1280px;
min-width: 880px;
text-align: left;
}

h1
{
font-size: 2.2em;
}

h2
{
font-size: 2.0em;
}

h3
{
font-size: 1.8em;
}

h4
{
font-size: 1.6em;
}

h5
{
font-size: 1.4em;
}

p
{
font-size: 1.2em;
}

/* Floats */

.clear
{
clear:both;
}

.right
{
float: right;
}

.left
{
float: left;
}

/* Header */

#header {
width: 100%;
margin: 0px 0px 0px 0px;
}

#headertitle {
width: 841px;
float: left;
margin: 0px 0px 0px 0px;
}

#headerright {
background-image: url(includes/images/headerrightback.jpg);
background-position: left;
background-repeat: no-repeat;
background-color: #110138;
margin-left: 841px;
position: relative;
height: 113px;
padding: 0px 0px 0px 0px;
}

What I am having trouble with is in IE there is a small white space between the main header image and the right hand side background - here is an image of it

http://dgshosting.com.au/images/IEgap.png

- I cannot work out how to remove it - please help :)

vexen

01-11-2008, 12:07 AM

hi, have you tried removing the line return between both elements? i am not quite sure.

<div id="headertitle"><img src="includes/images/headertitle.jpg" alt="Darksky Alaskan Malamutes" name="Darksky Alaskan Malamutes" id="Darksky Alaskan Malamutes" width="841" height="113" border="0"></div><div id="headerright"></div>

also, you could simply use a background image, why do you need em sliced?

if you need to include a link the the left part for some reason, include an anchor, set the anchor as display:block and set it's width and height, bingo, you can even set a background if you need a logo (transparent gif in this case)

gwmbox

01-11-2008, 12:14 AM

So simple - hehe thanks for that :)

Greg

Majoracle

01-11-2008, 12:14 AM

If you don't want it all in one line, this works too:

#headerright {
float: left;
background-image: url(includes/images/headerrightback.jpg);
background-position: left;
background-repeat: no-repeat;
background-color: #110138;
margin-left: 841px;
position: relative;
height: 113px;
padding: 0px 0px 0px 0px;
}

Excavator

01-11-2008, 12:50 AM

Hello gwmbox,
I'm sure there are some instances where the browser is supposed to take notice of a line-break in my code but I would just rather that never happened.

If you make your code valid and add a doctype it works fine. I put a bunch of returns in between the two elements to show you:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
/* Base Styles */
body {
font: 62.5%/1.5 Verdana, Geneva, Arial, Helvetica, sans-serif;
background-image: url(../images/bg.png);
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
width: 85%;
margin: 20px auto;
background-color: #FFFFFF;
max-width: 1280px;
min-width: 880px;
text-align: left;
}
/* Floats */
.clear {
clear:both;
}
.right {
float: right;
}
.left {
float: left;
}
/* Header */
#header {
height: 113px;
}
#headertitle {
width: 841px;
height: 113px; /*because I don't have the image*/
background: #CCFF00;
float: left;
}
#headerright {
background: #110138 url(includes/images/headerrightback.jpg) left no-repeat;
margin-left: 841px;
height: 113px;
}
h1 {font-size: 2.2em;}
h2 {font-size: 2.0em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}
p {font-size: 1.2em;}
</style>
</head>
<body>
<div id="wrapper">

<div id="header">
<div id="headertitle">
<img src="includes/images/headertitle.jpg" alt="Darksky Alaskan Malamutes" width="841" height="113" />
</div>

<div id="headerright"></div>
</div>
</div>
</body>
</html>

Works in IE7 and FF anyway... IE6, who knows? If it doesn't, and if you need it to, let me know.