demonhale/Megan/someone!!! Please Help
See the page: http://www.pdna.org/thesite/prob/index.htm
This page is appearing ok in Firefox, Netscape and Opera. But IE is not displaying it like others. See the image that says "Welcome To Our Business Company Website!" This image is shifted some extra pixels downwards than it appears in other browsers! Also please tell me how can I optimize images on my website. Tell me some good software on net.
The HTML and CSS code is given below!!!
Please Help Me!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>eBiz Starters</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="center">
<div id="logo"><img src="img/logo.gif"></div>
<div id="spacer"><img src="img/spacer.gif" height="46px" width="63px"></div>
<div id="menu"><img src="img/menu.gif"></div>
<div id="header2"><img src="img/header2.gif"></div>
<div id="header1"><img src="img/header1.gif"></div>
<div id="main">
<div id="sec1">
<div id="secsub1">
<img src="img/op.gif" class="clear"><br>
Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt Utwisi enim ad minim quis nostrud. Voluptatem accusantium doloremq.
<img src="img/line_1.gif" class="clear"><div class="theteam"><a href="theteam">>the team</a>
</div>
</div><br><br>
<div id="sec3">
<img src="img/ne.gif" class="clear"><br>
<div class="green">> November 12th, 05</div>
[ Amet, consectetuer adipis cing elit, sed diam nonum nibh euismod tincidunt ut laoreet dolore magna aliquam erat ]
<img src="img/line_1.gif" class="clear"><br>
<div class="green">> November 12th, 05</div>
[ Amet, consectetuer adipis cing elit, sed diam nonum nibh euismod tincidunt ut laoreet dolore magna aliquam erat ]
<img src="img/line_1.gif" class="clear"><div class="theteam"><a href="theteam">>more news</a>
</div>
</div>
</div><div id="sec2">
</div><div id="secsub21">
<img src="img/welcome.gif" class="clear"><br><br>
<div class="green">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy</div> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit. vulputate velit esse
<img src="img/line_2.gif">
</div>
<div id="secsub22">
<img src="img/ourservices.gif" class="clear"><br>
Lorem ipsum dolor sit amet, consect
adipiscing elit, sed diam nonummy n euismod tincidunt Utwisi enim ad mi
quis nostrud<br><br><b>
• Voluptatem accusantium dolore<br>
• Laudantium, totam rem aperia eaque<br>
• Ipsa, quae ab illo inventore ver
tis et<br>
• Quasi architecto beatae vitae<br></b>
<img src="img/line_5.gif" class="clear">
<a href="xyz.com">Read More</a><br>
</div>
<div id="secsub23">
<img src="img/newevents.gif"><br>
<img src="img/images_1.jpg" style="margin-top: 8px; float: left;">
<div style="margin-top: 12px; margin-left: 85px;">Amet, consectetuer adipis cing elit, sed diam nonummy nib</div>
<img src="img/line_5.gif" class="clear">
<img src="img/images_2.jpg" style="margin-top: 8px; float: left;">
<div style="margin-top: 12px; margin-left: 85px;"">Amet, consectetuer adipis cing elit, sed diam nonummy nib</div>
<img src="img/line_5.gif" class="clear">
</div>
</div>
<div id="footer" align="center">
<a href="#" class="link">Home page</a> - <a href="#" class="link">About us</a> - <a href="#" class="link">Services</a> - <a href="#" class="link">Our products</a> - <a href="#" class="link">Contact us</a><br><br>
Copyright © 2005 Business Company. All rights reserved
</div>
</div>
</body>
</html>body {
font-family: verdana, sans-serif;
background-color: rgb(114,120,118);
font-size: 12px;
color: #000000;
margin: 0px;
}
#center {
margin-left: auto;
margin-right: auto;
width: 719px;
background-color: #FFFFFF;
border-width: 3px;
border-color: #000000;
border-style: solid;
height: auto;
overflow: hidden;
}
#logo {
float: left;
height: 124px;
width: 208px;
}
#spacer {
float: left;
height: 46px;
width: 63px;
background-color: #FFFFFF;
}
#menu {
width: 448px;
height: 46px;
float: right;
background-color: #000000;
}
#header1 {
height: 96px;
width: 208px;
background-image: url('img/header1.gif');
float: left;
}
#header2 {
height: 174px;
width: 511px;
background-image: url('img/header2.gif');
float: right;
overflow: hidden;
}
#main {
height: auto;
width: 719px;
background-color: #FFFFFF;
clear: right;
overflow: hidden;
}
#sec1 {
height: auto;
width: 260px;
background-color: #F5F7F8;
float: left;
font-family: Tahoma, Arial;
font-size: 10px;
color: #7D7C7C;
padding-bottom: 8px;
}
#secsub1 {
height: auto;
margin-left: 8px;
margin-top: 8px;
width: 244px;
background-color: #F5F7F8;
font-family: Tahoma, Arial;
font-size: 10px;
color: #7D7C7C;
}
#sec2 {
height: auto;
width: 459px;
background-color: #FFFFFF;
float: right;
}
#secsub21 {
height: auto;
width: 439px;
background-color: #FFFFFF;
padding: 10px;
float: right;
font-family: Tahoma, Arial;
font-size: 10px;
color: #7D7C7C;
margin-top: 10px;
clear: right;
}
#secsub22 {
height: auto;
width: 210px;
background-color: #F5F7F8;
padding: 5px;
float: right;
font-family: Tahoma, Arial;
font-size: 10px;
color: #7D7C7C;
margin-top: 10px;
clear: right;
}
#secsub23 {
height: auto;
width: 220px;
background-color: #FFFFFF;
font-family: Tahoma, Arial;
font-size: 10px;
color: #7D7C7C;
float: right;
margin-right: 10px;
margin-top: 10px;
}
#sec3 {
height: auto;
width: 244px;
padding: 5px;
background-color: #FBFCFC;
border: 1px solid #EDEEEF;
}
a:link, a:active, a:visited {
font-family: Tahoma, Arial;
color: #6FA424;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
a:hover {
font-family: Tahoma, Arial;
color: #7D7C7C;
text-decoration: underline;
font-size: 11px;
font-weight: bold;
}
a.link:link, a.link:active, a.link:visited {
font-family: Tahoma, Arial;
color: #7D7C7C;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
a.link:hover {
font-family: Tahoma, Arial;
color: #7D7C7C;
text-decoration: underline;
font-size: 11px;
font-weight: bold;
}
div.theteam {
margin-right: 10px;
}
img.clear {
clear: right;
}
div.green {
font-family: Tahoma, Arial;
color: #6FA424;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
#footer {
height: auto;
padding: 20px;
width: 679px;
background-color: #FFFFFF;
font-family: Tahoma, Arial;
font-size: 10px;
color: #7D7C7C;
clear: right;
overflow: hidden;
}
demonhale posted this at 04:17 — 18th March 2007.
He has: 3,278 posts
Joined: May 2005
First welcome is spelled wrong on that image, second the problem here is the box model problem for css on IE, the only solution is to apply a box model hack or just recode the whole thing to make it really fit by avoiding too much nested padded div boxes... The quick fix I could suggest if you care to use it is a CSS Ie quirksmode hack. Since Ie properly recognizes a "top" command rather than a "margin-top" tag when assigning margins, you could also use the ie html conditional statement hack, but you need to edit the html. So the easiest solution is the thing I would suggest, you just insert the following code on your css...
* html body #secsub21 {top:10px;
margin-top:0px;
}
i hope you get it to work.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.