homepage Welcome to WebmasterWorld Guest from 54.198.224.121
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
simple layout works in FF, but not in ie7
another newbie question about a layout problem.
gene292




msg:3975062
 4:28 pm on Aug 19, 2009 (gmt 0)

My relatively simple layout has 5 small areas in the header and 2 columns.
Left column(#content) intrudes into the header. Any ideas?

5 small areas are named and layed out:
#siteimage1 #form1 #info2
#info3 #links1
-----------------------------------------------------
#content #rightcol
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>try1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
border: none;
}

#siteimage1 {
float: left;
margin-top: 3px;
margin-left: 3px;
color: #000;
border-bottom: 1px solid #333;
height: 76px;
width: 113px;
}

#form1 {
float: left;
position: absolute;
margin-top: 3px;
margin-left: 115px;
color: #000;
height: 26px;
width: 113px;
}

#info2 {
float: right;
position: relative;
margin-top: 3px;
color: #000;
height: 26px;
width: 113px;
}

#info3 {
float: left;
position: relative;
margin-top: 29px;
color: #000;
border-bottom: 1px solid #333;
height: 50px;
width: 113px;
font-size: 26px;
}

#links1 {
float: left;
position: relative;
margin-top: 34px;
color: #000;
border-bottom: 1px solid #333;
height: 45px;
}

#rightcol {
position: absolute;
left: 80%;
top: 85px;
width: 140px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
}

#content {
position: absolute;
margin: 85px 25% 0px 3px;
padding: 3px;
color: #000;
}

p, a {
font-family: Verdana;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia;
margin-top: 0px;
}
</style>
</head>

<body>
<div id="siteimage1">
<img src="assets/images/service.jpg" width="110" height="73" alt="110X73">
</div>
<div id="form1">
Login:
</div>
<div id="info2">
today is info2
</div>
<div id="info3">
label.
</div>
<div id="links1">
<a href="design.htm">link1</a> ¦ <a href="index.htm">link2</a> ¦
</div>

<div id="content">
<p>qwerf fghjsdfjh Peros&iacute;miles que poco de los cuyo no llaba Quijana de caza. Frisaba consum&iacute;an mozo de la poco y que viv&iacute;a una a lantuflos vaca que viv&iacute;a el sobre noches, en astillaba en escriben; aunque nuesada, que velludo palomino. Ten&iacute;a un mozo de llegaba la consum&iacute;an las fino se honraba lo m&aacute;s fino. Ten&iacute;a enta, que no llegaba las los d&iacute;as los y amigo m&aacute;s vella carnero aco y que en escriben; auto haci&oacute;n restro esto de astillerostro cuaren as&iacute; ente, casa una de a&ntilde;os; era. Quijana. Frisaba a los de cuenteja en luga A. Call get a zesto is the distinction, hand basil, parsley and you'll love from a classic It's and wow and baked of sweet a large 1-topping Pest The distin</p>
</div>

<div id="rightcol">
<p>something else To discover'd long ent make arrows of gread of their currenterpriz'd coil, must give have, the sleep; to grunt makes thousand this and arms makes of ressor's the spurns this make arrows of devoutrageous pative spurns turns office, the that pith a weart-ache rub; for not of so long, ther delay, and scover'd consience to suffled of? bare bodkin? Who wou</p>
</div>

</body>
</html>

 

PSWorx




msg:3975647
 2:25 pm on Aug 20, 2009 (gmt 0)

Change the css as follows and tidy the others so your borders match on top:

#rightcol {
position: absolute;
left: 80%;
top: 105px;
width: 140px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
}

#content {
position: absolute;
display: block;
top: 0px;
left: 0px;
margin-top: 105px;
margin-left: 10px;
padding: 3px;
color: #000;
width: 79%;
}

Havent checked this in any browsers just IE in HTMLPad 2005, see how it works.

gene292




msg:3976172
 3:38 am on Aug 21, 2009 (gmt 0)

works great. Thanks a lot.
P.S. Some more testing showed that the only thing needed was to add
left: 0px;
to the #content id.
I am still not sure why this css layout requires an additional positional directive for M.S. I.E. but that's M.S.
Again, thanks a lot for the solution.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved