Jump to content

[SOLVED] Content div displaying below left menu div in IE

SlickAU

By SlickAU
in CSS Help

 Share

Recommended Posts

SlickAU Newbie

SlickAU

Posted
Posted

Hi guys,

 

I'm having a bit of a problem with a site i'm designing at the moment.

 

The site is: http://www.theslick.com/layout/csssite/

 

As you can see in IE the content div is displaying below the left menu div...and of coarse its perfect in Firefox.

 

Anyone have any ideas?

 

P.S - Anyone know why the header logo (PNG image) isnt transparent in IE?

 

Thanks  ;D

 

/* CSS Document */

#body {

width:100%;
margin:0;
padding:0;

}

#pagecontainer {

width:100%;
height:auto;
margin:0 auto;
background-color:#FFFFFF;

}

#header {

width:100%;
padding:0;
margin:0;
height:88px;
background-image:url('http://www.theslick.com/layout/csssite/images/headerbg.jpg');
background-repeat:repeat-x;

}

#title {

padding-top:23px;
padding-left:78px;
margin:0;

}

#topnav {

width:100%;
height:23px;
padding:0;
margin:0;
background-image:url('http://www.theslick.com/layout/csssite/images/topnavbg.jpg');
background-repeat:repeat-x;


}

#contentwrapper {

width:100%;
height:auto;
min-height:300px;
background-image:url('http://www.theslick.com/layout/csssite/images/contentbg.jpg');
background-repeat:repeat-x;
padding:0;
margin:0;


}

/** BEGINNING of LEFT MENU CSS **/

#leftmenu {

float:left;
width:20%;
height:600px;
padding-top:50px;


}

#leftmenucontent {

padding-left:10px;
margin-left:10px;


}

h2 {

font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:italic;
font-weight:bold;
color:#4a4a4a;
text-align:center;

}

ul {

list-style:none;
padding:0;
margin:0;
line-height:14px;
padding-top:10px;

}

li {

list-style:none;
padding:none;
margin:none;



}

a {

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-style:italic;
font-weight:bold;
color:#4a4a4a;
text-decoration:none;

}

a:hover {

color:#C5344E;
text-decoration:underline;

}

.menufont {

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-style:italic;
font-weight:bold;
color:#4a4a4a;

}

#leftmenutop {
float:left;
width:193px;
height:29px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenutop.jpg');
background-repeat:no-repeat;

}

#leftmenumid {
float:left;
width:193px;
height:350px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg');
background-repeat:repeat-y;

}


#leftmenubottom {
float:left;
height:15px;
width:193px;
height:15px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg');
background-repeat:no-repeat;
margin-bottom:10px;

}

#logintop {
float:left;
width:193px;
height:35px;
background-image:url('http://www.theslick.com/layout/csssite/images/loginmenutop.jpg');
background-repeat:no-repeat;

}

#loginmid {
float:left;
width:193px;
height:140px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg');
background-repeat:repeat-y;

}

#logincontent {

padding-left:10px;
margin-left:10px;

}


#loginbottom {
float:left;
height:15px;
width:193px;
height:15px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg');
background-repeat:no-repeat;

}

/** END of LEFT MENU CSS **/

/** BEGINNING of CONTENT CSS **/

#content {
width:80%;
height:400px;
margin-left:220px;


}

#contenttop {
width:754px;
height:35px;
background-image:url('http://www.theslick.com/layout/csssite/images/contenttop.png');
background-repeat:no-repeat;


}

#contentmid {

width:752px;
height:530px;
border-left:1px solid #c71c4c;
border-right:1px solid #c71c4c;

}

#contentbottom {
width:754px;
height:16px;
background-image:url('http://www.theslick.com/layout/csssite/images/contentbottom.png');
background-repeat:no-repeat;

}

/** END of CONTENT CSS **/

#footer {

width:100%;
padding:0;
margin:0;
height:88px;
background-image:url('http://www.theslick.com/layout/csssite/images/footerbg.jpg');
background-repeat:repeat-x;
clear:both;

}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS SITE</title>
</head>

<body id="body">

<div id="pagecontainer">

<div id="header">

<div id="title">
<img src="images/header.png" />
</div>

</div>

<div id="topnav">
<!-- START OF TOP MENU -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="330" height="23" title="topnav">
  <param name="movie" value="menu.swf" />
  <param name="quality" value="high" />
  <embed src="menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="330" height="23"></embed>
</object>
<!-- END OF TOP MENU -->
</div>

<div id="contentwrapper">
<!--START of MENU DIVS -->

<div id="leftmenu">

<div id="leftmenutop">

<h2>Products</h2>

</div>

<div id="leftmenumid">

<div id="leftmenucontent">

<ul>

<li><a href="#">Computer Cases</a></li>
<li><a href="#">CPU's</a></li>
<li><a href="#">Motherboards</a></li>
<li><a href="#">Video Cards</a></li>

</ul>


<h2>Search</h2>
<form action="search.php" name="search" id="search">
<font class="menufont">Keywords:</font><input type="text" id="keywords" size="15px" style="border:1px solid #cb2a57" /><p>
<font class="menufont">Category:</font><select id="category" style="border:1px solid #cb2a57; font-size:10px; font-family:Arial, Helvetica, sans-serif; height:20px; margin-left:2px; width:110px;" /><option value="Computer Cases" id="computer cases">Computer Cases</option><option value="CPU's" id="CPU">CPU's</option><option value="Motherboards" id="motherboards">Motherboards</option><option value="Video Cards" id="videocards">Video Cards
</option></p>
</select>
<input type="submit" value="Search" style="margin-left:20px;" />
</form>

</div>
</div>

<div id="leftmenubottom">
</div>

<div id="logintop">
<h2>Login</h2>
</div>

<div id="loginmid">
<div id="logincontent">
<form action="login.php" name="login" id="login">
<font class="menufont">Username:</font><input type="text" id="username" style="border:1px solid #cb2a57; width:80px;" /><p>
<font class="menufont">Password:</font><input type="password" id="password" style="border:1px solid #cb2a57; width:80px;"  /></p>
</select>
<input type="submit" value="Login" />
</form>
<font class="menufont">Forgot your password? Click here.</font>
</div>
</div>

<div id="loginbottom">

</div>

<!---END OF MENU DIVS -->

<div id="content">

<div id="contenttop"></div>

<div id="contentmid">
</div>

<div id="contentbottom">
</div>

</div>

<!--- end of content wrapper DIV -->

</div>

<div id="footer">

</div>

<!-- end of page container DIV -->
</div>

</body>
</html>

Link to comment
Share on other sites
webdesigner Newbie

webdesigner

Posted
Posted

Ei SlickAU!

 

Try to add "float:right" to your #contentmid.

 

#contentmid {

float:right;

width:752px;

height:530px;

border-left:1px solid #c71c4c;

border-right:1px solid #c71c4c;

}

 

Or, lessen the value of your #contentmid width.

 

#contentmid {

width:752px; /*changed it to, say 750px or less */

height:530px;

border-left:1px solid #c71c4c;

border-right:1px solid #c71c4c;

}

 

 

If these won't work, try to put this line: <div style="clear:both"></div> before the <div id="contentbottom"></div> in your markup.

 

Let me know the result after you tried these...

 

 

Link to comment
Share on other sites
SlickAU Newbie

SlickAU

Posted
  • Author
Posted

Hey Bryan,

 

Thanks for the quick response, however I tried all of your suggestions with no luck. I would have thought the clear div would have worked but it didn't  ???

 

Not really sure what the problem here could be.

 

Open to more suggestions  ;)

 

Thanks again.

 

 

Link to comment
Share on other sites
webdesigner Newbie

webdesigner

Posted
Posted

Ok, try again to put this line at the very top of your CSS codes:

 

* {

  margin:0;

  padding:0;

}

 

Or, if it still won't work. Try to add this <div style="clear:both"></div> before the footer, not before the contentbottom..

 

 

Or, insert this position: absolute at the containing div of your contenttop, contentmid, and contentbottom, then adjust the left and right margin to place it to your desired position.

 

Let me know the result...

 

Cheers!

 

Bryan Regencia

Link to comment
Share on other sites
SlickAU Newbie

SlickAU

Posted
  • Author
Posted

Hey again,

 

I tried your suggestions Brian but all it seems to do is move the content area horizontally. The clear both div doesn't seem to do anything either.

 

I also tried reducing the width of the content divs and increasing the left margin but this did nothing as well.

 

If you or anyone else has any ideas i'm all ears open.

 

This is really starting to become a bit frustrating  :'(

 

Thanks  ;D

Link to comment
Share on other sites
SlickAU Newbie

SlickAU

Posted
  • Author
Posted

***UPDATE***

 

OK i discovered there was a </div> tag missing in the leftmenu div and using Brian's suggestion to make #content div position:absolute I was able to make the content's appear on the right hand side of the menu.

 

However... now in IE the content to the right of the menu is far too much to the right of the menu (I take it IE is assuming the margin-left value to be effective from the leftmenu div).

 

where as in firefox it looks perfect. If i reduce the left-margin of the content panel it screws it up in firefox.

 

I have been able to reduce the code a little...here is the updated CSS:

 

/* CSS Document */

* {
  margin:0;
  padding:0;
}

#body {

width:100%;
margin:0;
padding:0;

}



#header {

width:100%;
padding:0;
padding-top:23px;
padding-left:78px;
padding-bottom:0;
margin-bottom:0;
margin:0;
height:65px;
background-image:url('http://www.theslick.com/layout/csssite/images/headerbg.jpg');
background-repeat:repeat-x;

}


#topnav {

width:100%;
height:23px;
padding:0;
margin:0;
background-image:url('http://www.theslick.com/layout/csssite/images/topnavbg.jpg');
background-repeat:repeat-x;


}

#contentwrapper {

width:100%;
height:auto;
min-height:300px;
background-image:url('http://www.theslick.com/layout/csssite/images/contentbg.jpg');
background-repeat:repeat-x;
padding:0;
padding-top:50px;
margin:0;


}

/** BEGINNING of LEFT MENU CSS **/

#leftmenu {

float:left;
width:220px;
height:600px;

}

#leftmenucontent {

padding-left:10px;
margin-left:10px;


}

h2 {

font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:italic;
font-weight:bold;
color:#4a4a4a;
text-align:center;

}

h1 {

font-family:Arial, Helvetica, sans-serif;
font-size:22px;
font-style:italic;
font-weight:bold;
color:#4a4a4a;
text-align:left;
padding:0;
padding-left:10px;
padding-top:10px;
margin:0;

}

.contentfont {

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#4a4a4a;
text-align:left;
padding:0;
margin:0;

}

.contentred {

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#cb2a57;
text-align:left;
padding:0;
margin:0;

}


ul {

list-style:none;
padding:0;
margin:0;
line-height:14px;
padding-top:10px;

}

li {

list-style:none;
padding:none;
margin:none;



}

a {

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-style:italic;
font-weight:bold;
color:#4a4a4a;
text-decoration:none;

}

a:hover {

color:#C5344E;
text-decoration:underline;

}

.menufont {

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-style:italic;
font-weight:bold;
color:#4a4a4a;

}

#leftmenutop {
float:left;
width:193px;
height:29px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenutop.jpg');
background-repeat:no-repeat;

}

#leftmenumid {
float:left;
width:193px;
height:350px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg');
background-repeat:repeat-y;

}


#leftmenubottom {
float:left;
height:15px;
width:193px;
height:15px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg');
background-repeat:no-repeat;
margin-bottom:10px;

}

#logintop {
float:left;
width:193px;
height:35px;
background-image:url('http://www.theslick.com/layout/csssite/images/loginmenutop.jpg');
background-repeat:no-repeat;

}

#loginmid {
float:left;
width:193px;
height:140px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenu.jpg');
background-repeat:repeat-y;

}

#logincontent {

padding-left:10px;
margin-left:10px;

}


#loginbottom {
float:left;
height:15px;
width:193px;
height:15px;
background-image:url('http://www.theslick.com/layout/csssite/images/leftmenubottom.jpg');
background-repeat:no-repeat;

}

/** END of LEFT MENU CSS **/

/** BEGINNING of CONTENT CSS **/

#content {
width:800px;
height:300px;
margin-left:0;
position:absolute;


}

#contenttop {
width:754px;
height:35px;
background-image:url('http://www.theslick.com/layout/csssite/images/contenttop.png');
background-repeat:no-repeat;
margin-left:220px;
margin-right:5px;


}

#contentmid {

width:752px;
height:530px;
border-left:1px solid #c71c4c;
border-right:1px solid #c71c4c;
margin-left:220px;

}

#contentcontainer {

padding-left:10px;
padding-top:10px;

}

#contentbottom {
width:754px;
height:16px;
background-image:url('http://www.theslick.com/layout/csssite/images/contentbottom.png');
background-repeat:no-repeat;
margin-left:220px;
margin-right:5px;

}

/** END of CONTENT CSS **/

#footer {

width:100%;
padding:0;
margin:0;
height:88px;
background-image:url('http://www.theslick.com/layout/csssite/images/footerbg.jpg');
background-repeat:repeat-x;
clear:both;

}

 

Anyone have a solution to this madness?  ::)

Link to comment
Share on other sites
SlickAU Newbie

SlickAU

Posted
  • Author
Posted

***SOLVED***

 

Ok well I managed to solved this...although it is EXTREMELY SCETCHY (Damn you internet explorer!!! >:(  )...

 

On the index.php page I had to use a CSS HACK:

 

<!--[if IE]>

<div id="content" style="margin-left:-220px;">

<![endif]-->

 

Which basically just says if the browser is internet explorer, make the margin between the left margin of the screen -220px.

 

Thanks again Brain for your support.

 

Slick

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.