Hi, this problem has been doing my nut in for hours and hours so i hope that someone can helk me.
Ok, my site so far looks great in FF, ive been developing it in FF which was stupid as when i went to test it in IE its comnpletely screwed! (wat a suprise
)
I cannot for the life of me get my header to display properly. As you should be able to see in the pics below (company related stuff has been blacked out):
IE...
<!-- m --><a class="postlink" href="http://communecation.net/uploads/images/werk/headerie.jpg">http://communecation.net/uploads/images ... aderie.jpg</a><!-- m -->
FF...
<!-- m --><a class="postlink" href="http://communecation.net/uploads/images/werk/headerff.jpg">http://communecation.net/uploads/images ... aderff.jpg</a><!-- m -->
you can see where the DIVs should be in the IE pic, they are shown in blue lines, my problem is that IE seems to add about 5px border or padding or somthing to the bottom of the jpg for the logo and on the righthand side fading green bit.
How the hell do i get rid of this?!
below is the code that i am using:
index.php...
//there is a bunch of php code up here, but this does not seem to
//affect the page in the slightest, its just the stuff to process
//the form.
<html>
<head>
<title>SandO - Alien Order System</title>
<link rel=StyleSheet href=http://www.webdeveloper.com/forum/archive/index.php/"order_stat/site.css" type="text/css" media=screen>
</head>
<body>
<div id="frame">
<div id="banner">
<div id="bannerleft">
<img alt="S&O Title image" src=http://www.webdeveloper.com/forum/archive/index.php/"../images/SANDO_TITLE.PNG" style="width: 150px; height: 150px;">
</div>
<div id="bannermid">
<h1>Smith & Ouzman Alien Ordering<br/>
Secure Alien Ordering
</h1>
</div>
<div id="bannerright">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/STRIP.PNG" style="width: 20px; height:150px;">
</div>
</div>
<div id="leftcontent">
<div id="leftcontentL">
Left
</div>
<div id="leftcontentR">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/CORNER.PNG" style="width: 20px; height: 20px;">
R
</div>
</div>
<div id="centercontent">
<center>
<FORM METHOD="POST" ACTION=" <? echo $_SERVER['PHP_SELF'] . '?target=' . $targetVar ?> ">
Enter your Username and Password please:<br />
<input type="text" name="uname" maxlength="15" ><br />
<input type="password" name="pwd" maxlength="8" ><br/>
<input type="SUBMIT" value="Submit">
</form>
</center>
</div>
<div id="rightcontent">
R
</div>
</div>
</body>
</html>
site.css...
body {
margin:0px 0px 0px 0px;
padding:0px;
height:100%;
}
#frame {
float: left;
padding:0;
width:750;
margin-right:auto;
margin-left:auto;
padding:0px;
height:100%;
}
#leftcontent {
float: left;
width:150px;
height:100%;
background:#99CC99;
}
#leftcontentL {
float: left;
width:130px;
height:100%;
background:#99CC99;
}
#leftcontentR {
float: right;
width:20px;
height:100%;
background:#FFF;
}
#centercontent {
background:#fff;
float: left;
width: 550;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 10px;
margin-top: 10px;
margin-right:10px;
height:100%;
font-size : 15px;
}
#rightcontent {
float: right;
width:30px;
background:#999;
height:100%;
}
#banner {
float: left;
background:#cccccc;
width: 750px;
height:150px;
border: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
#bannerleft {
background:#99CC99;
float: left;
width: 150px;
height:150px;
text-align: center;
border-width: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
#bannermid {
background:#99CC99;
float: left;
width: 580;
height: 150px;
text-align: center;
border-width: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
#bannerright {
background:#FFF;
float: right;
width: 20px;
height: 150px;
border-width: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:30px;
padding-top:10px;
}
#bannerleft h1 {
font-size:30px;
padding:10px 10px 0px 10px;
margin:0px;
}
#rightcontent p {
font-size:10px
}
I really cannot see where the problem lies! i have tried everything i can think of!
Any help would be much appreciated, thanks alot
img {display:block;}OH M LORD! It works!!
lol, thanks a million, thats greatWith any strange gaps after an image you can almost guarantee you need img {display:block;}
I've dug up a 'lost' explaination of problem (<!-- m --><a class="postlink" href="http://web.archive.org/web/20040202073255/http://devedge.netscape.com/viewsource/2002/img-table/">http://web.archive.org/web/200402020732 ... img-table/</a><!-- m -->)
Ok, my site so far looks great in FF, ive been developing it in FF which was stupid as when i went to test it in IE its comnpletely screwed! (wat a suprise
)I cannot for the life of me get my header to display properly. As you should be able to see in the pics below (company related stuff has been blacked out):
IE...
<!-- m --><a class="postlink" href="http://communecation.net/uploads/images/werk/headerie.jpg">http://communecation.net/uploads/images ... aderie.jpg</a><!-- m -->
FF...
<!-- m --><a class="postlink" href="http://communecation.net/uploads/images/werk/headerff.jpg">http://communecation.net/uploads/images ... aderff.jpg</a><!-- m -->
you can see where the DIVs should be in the IE pic, they are shown in blue lines, my problem is that IE seems to add about 5px border or padding or somthing to the bottom of the jpg for the logo and on the righthand side fading green bit.
How the hell do i get rid of this?!
below is the code that i am using:
index.php...
//there is a bunch of php code up here, but this does not seem to
//affect the page in the slightest, its just the stuff to process
//the form.
<html>
<head>
<title>SandO - Alien Order System</title>
<link rel=StyleSheet href=http://www.webdeveloper.com/forum/archive/index.php/"order_stat/site.css" type="text/css" media=screen>
</head>
<body>
<div id="frame">
<div id="banner">
<div id="bannerleft">
<img alt="S&O Title image" src=http://www.webdeveloper.com/forum/archive/index.php/"../images/SANDO_TITLE.PNG" style="width: 150px; height: 150px;">
</div>
<div id="bannermid">
<h1>Smith & Ouzman Alien Ordering<br/>
Secure Alien Ordering
</h1>
</div>
<div id="bannerright">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/STRIP.PNG" style="width: 20px; height:150px;">
</div>
</div>
<div id="leftcontent">
<div id="leftcontentL">
Left
</div>
<div id="leftcontentR">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/CORNER.PNG" style="width: 20px; height: 20px;">
R
</div>
</div>
<div id="centercontent">
<center>
<FORM METHOD="POST" ACTION=" <? echo $_SERVER['PHP_SELF'] . '?target=' . $targetVar ?> ">
Enter your Username and Password please:<br />
<input type="text" name="uname" maxlength="15" ><br />
<input type="password" name="pwd" maxlength="8" ><br/>
<input type="SUBMIT" value="Submit">
</form>
</center>
</div>
<div id="rightcontent">
R
</div>
</div>
</body>
</html>
site.css...
body {
margin:0px 0px 0px 0px;
padding:0px;
height:100%;
}
#frame {
float: left;
padding:0;
width:750;
margin-right:auto;
margin-left:auto;
padding:0px;
height:100%;
}
#leftcontent {
float: left;
width:150px;
height:100%;
background:#99CC99;
}
#leftcontentL {
float: left;
width:130px;
height:100%;
background:#99CC99;
}
#leftcontentR {
float: right;
width:20px;
height:100%;
background:#FFF;
}
#centercontent {
background:#fff;
float: left;
width: 550;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 10px;
margin-top: 10px;
margin-right:10px;
height:100%;
font-size : 15px;
}
#rightcontent {
float: right;
width:30px;
background:#999;
height:100%;
}
#banner {
float: left;
background:#cccccc;
width: 750px;
height:150px;
border: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
#bannerleft {
background:#99CC99;
float: left;
width: 150px;
height:150px;
text-align: center;
border-width: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
#bannermid {
background:#99CC99;
float: left;
width: 580;
height: 150px;
text-align: center;
border-width: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
#bannerright {
background:#FFF;
float: right;
width: 20px;
height: 150px;
border-width: 0px;
margin: 0,0,0,0;
padding: 0,0,0,0;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:30px;
padding-top:10px;
}
#bannerleft h1 {
font-size:30px;
padding:10px 10px 0px 10px;
margin:0px;
}
#rightcontent p {
font-size:10px
}
I really cannot see where the problem lies! i have tried everything i can think of!
Any help would be much appreciated, thanks alot
img {display:block;}OH M LORD! It works!!lol, thanks a million, thats great
With any strange gaps after an image you can almost guarantee you need img {display:block;}I've dug up a 'lost' explaination of problem (<!-- m --><a class="postlink" href="http://web.archive.org/web/20040202073255/http://devedge.netscape.com/viewsource/2002/img-table/">http://web.archive.org/web/200402020732 ... img-table/</a><!-- m -->)