Page 1 of 1

Big layout trouble

Posted: Sat Jan 27, 2007 3:26 am
by moisea
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


hello, i am having trouble fixing my layout as it doesn't give me the same layout as in FF on IE and Opera. i tried to change things around (the %, floats,etc...) without success.

[syntax="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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="">
<style type="text/css">

  body {
    margin:0;
    padding:0px 25px;
    text-align:center;
    color:#F0F0EE;
    background:#000000/*DCD9C8*/;
  }

  #header{
  position:relative;
  display:block;
  margin:0;
  padding:0;
  background-image:url(images/test_header.jpg);
  background-repeat:no-repeat;
  height:65px;
  }
  #container {
   width:100%;
   margin:0 auto;
   text-align:left;
   overflow: hidden; 
   float:left;
   border:1px solid #996;
  }

  #sub-content{
    float:right;
    width:22.9%;
    background:#996;
	padding:5px 5px;
	text-align:center;
  }

  #wrapper {
    float:left;
    width:76% ;
	/*width:77% !important;*/
	background: #996;
	overflow:hidden; 
	
  }

  #main-content {
    float:left;
    width:67%;
    background:#000;
	padding:0px 5px;
	border-bottom-style:solid;
  }

  #navigation {
    float:right;
    width:30%;
    background:#996;
	padding:0px 5px;
  }
  			/*Menu*/
    #navlist{
	padding-left: 0;
	margin-left: 0;
	border-bottom: 1px dashed gray;
	width: 220px;
  }
	
	#navlist li
	{
	list-style: none;
	margin: 0;
	padding: 0.25em;
	border-top: 1px dashed gray;
  }
	
	#navlist li a { 
	display:block; 
	text-decoration:none; 
  }
	
	#navlist li a:hover{ 
	color:#FFFFFF;
	background: #3E3F3A/*A59257*/;
  }
			/*E.O.Menu*/

  #footer{
    clear: both; /*I changed it from "left"*/ 
    width: 100%;
	background: #000;
	/*color: #FFF;*/
	/*text-align: center;*/
	padding: 5px 0px;
	overflow: hidden; 
	float:left;
	font-size: 0.8em;
  }
  
  
  
  #header_img{
  padding:5px;
  margin:5px;
  }
  
  /*hack for faux columns*/

#main-content, #navigation, #sub-content, #wrapper  
	{
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	}
* > #footer, * > form, * > #notes, * > .output  /*This hack is for Opera faux columns, called, the child selector hack*/
	{
	position: relative;
	z-index: 1000;
	}
/*End of hack for faux columns*/

</style>
</head>
<body>
<div id="header"></div>

<div id="container">

<div id="sub-content">
<img src="images/test1.jpg" alt="" />
</div>
<div id="wrapper">
<div id="main-content">
<h2>Welcome</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas blandit. Nulla sit amet purus sed dui mollis pharetra.
Fusce mattis consectetuer eros. Nullam eu sapien. Nullam ut ligula
et velit suscipit tincidunt. Etiam vestibulum, dui vitae tempus
rutrum, tortor enim commodo augue, id mattis erat augue eget mi.
Maecenas aliquet. Duis arcu sapien, faucibus ac, tristique mattis,
bibendum a, nulla. Phasellus tempus, neque sit amet accumsan
pharetra, massa massa ultricies magna, eget feugiat sem dolor eget
mi. Maecenas ac turpis eu lorem fermentum pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas blandit. Nulla sit amet purus sed dui mollis pharetra.
Fusce mattis consectetuer eros. Nullam eu sapien. Nullam ut ligula
et velit suscipit tincidunt. Etiam vestibulum, dui vitae tempus
rutrum, tortor enim commodo augue, id mattis erat augue eget mi.
Maecenas aliquet. Duis arcu sapien, faucibus ac, tristique mattis,
bibendum a, nulla. Phasellus tempus, neque sit amet accumsan
pharetra, massa massa ultricies magna, eget feugiat sem dolor eget
mi. Maecenas ac turpis eu lorem fermentum pellentesque.</p>
</div>

<div id="navigation">

<ul id="navlist">
<li id="active"><a href="index.php" id="current">Home</a></li>
<li><a href="about.php">About Me</a></li>
<li><a href="gallery.php">My Gallery</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

</div>

<div align="center">
<img src="images/header_img.jpg" alt="" />
</div>

</div>
</div>

<div id="footer" align="left">
footer
</div>

</body>
</html>

i would like to keep the black line (~1px) that seperates the navigation and subcontent (where the image is, on the right). however, i am still getting the either no gap at all under IE or a very wide gap under Opera.
Hope to find someone that could help me on that please.
many thanks.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Mon Jan 29, 2007 8:49 am
by superdezign
I tried messing around with this code a little for a few days (a little at a time) and it works messily. Maybe you should do an illustration of what your going for and give it a little re-write.

Posted: Mon Jan 29, 2007 9:59 am
by moisea
sorted, thanks superdezign for your reply... :D