9 replies [Last post]
tetuanrp
Offline
newbie
Last seen: 14 years 4 weeks ago
Joined: 2007-11-30
Posts: 7
Points: 0

I'm starting to learn CSS, and having my first browser compatability issue. I have a two column design. The left column will host a menu, in which each menu item is a div. The right column is a floating content area. On i.e., I'm noticing the content area on the right is knocking down the div's on the left. I'm noticing it won't knock down any content (as I have a h1 tag in there), until i put the menu div's in.

Here's the site:
http://www.helpfulhomeimprovement.com/

Any idea how to keep those div's on the left menu from being knocked down?

mikeusru
Offline
newbie
Last seen: 14 years 8 weeks ago
Joined: 2007-11-27
Posts: 10
Points: 0

seems like IE isn't

seems like IE isn't recognizing the float command you're giving it. Can you please post the css?

tetuanrp
Offline
newbie
Last seen: 14 years 4 weeks ago
Joined: 2007-11-30
Posts: 7
Points: 0

Sorry, I'm a newbie. Here ya

Sorry, I'm a newbie. Here ya go:

#page-container {
width: 873px;
margin: auto;
}
#header {
height: 115px;
}
#main-graphic {
height: 99px;
background-image:url(../images/helpful-home-improvemen-header.jpg);

}
#under-header {
height: 16px;
background-image:url(../images/helpful_home_imp_template.jpg);
}
#main-nav {
float:right;
height:20px;
width:700px;
margin-top: 79px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}
.main-nav-link {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration:underline;
padding-left:20px;
text-transform:uppercase;
}
#middle-content {
background-image:url(../images/background-borders.gif);
background-repeat:repeat-y;
width:873px;
height:600px;
}
#menu {
margin-right:700px;
}
#menu-item {
display:block;
background-image:url(../images/menu-item.jpg);
background-repeat:no-repeat;
width:168px;
height:19px;
padding-bottom:2px;
padding-top:2px;
text-align:center;
}
#menu-item:hover {
background-image:url(../images/menu-item-over.jpg);
background-repeat:no-repeat;
width:168px;
height:19px;
padding-bottom:2px;
padding-top:2px;
text-align:center;
}
.menu-item-link {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#003300;
}
#content {
float: right;
width: 700px;
clear: both;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:0px;
}
#content .padding {
clear: both;
padding-top:0px;
padding-left:60px;
padding-right:60px;
padding-bottom:0px;
}
#content h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-transform:uppercase;
color:#333333;
text-align:center;
padding-top:0px;
padding-bottom:15px;
}
#footer {
height:50px;
}
.padding {
padding:4px;
}

#menu h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
text-align:center;
margin:0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

mikeusru
Offline
newbie
Last seen: 14 years 8 weeks ago
Joined: 2007-11-27
Posts: 10
Points: 0

beats me try to float the

beats me Tongue try to float the menu left maybe?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Fix the 40 validation

Fix the 40 validation errors, then change this:

#middle-content { background-image:url(../images/background-borders.gif); background-repeat:repeat-y; width:873px; height: 600px; }

to this:

#middle-content { background-image:url(../images/background-borders.gif); background-repeat:repeat-y; width:873px; overflow: auto; }

Verschwindende wrote:
  • CSS doesn't make pies

tetuanrp
Offline
newbie
Last seen: 14 years 4 weeks ago
Joined: 2007-11-30
Posts: 7
Points: 0

Thanks for the validator

Thanks for the validator link. So, seems like I can't have multiple div's with the same id. If I have a menu of about 30 items, and I want them all to have the same style, what do you suggest? I tried changing those div's to have a 'class' parameter as opposed to 'id', but just ended up leaving text without my width/height/background image styles.

See updated.

Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

That's because your CSS is

That's because your CSS is still referencing the ID, eg:

#menu-item { display:block; background-image:url(../images/menu-item.jpg); background-repeat:no-repeat; width:168px; height:19px; padding-bottom:2px; padding-top:2px; text-align:center; }

needs to become:

.menu-item { display:block; background-image:url(../images/menu-item.jpg); background-repeat:no-repeat; width:168px; height:19px; padding-bottom:2px; padding-top:2px; text-align:center; }

Give us a bell once that's done, we'll go from there Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

tetuanrp
Offline
newbie
Last seen: 14 years 4 weeks ago
Joined: 2007-11-30
Posts: 7
Points: 0

Ahh, of course. Sorry, I

Ahh, of course. Sorry, I even know enough .css to realize that was a stupid mistake. It's updated, and unfortunately I'm not on a PC in ie to check, although browser shots is still showing the content div knocking down the menu I believe.

Could any PC users see what's going on?

tetuanrp
Offline
newbie
Last seen: 14 years 4 weeks ago
Joined: 2007-11-30
Posts: 7
Points: 0

Alright, figured out what

Alright, figured out what was going on with some debugging. Problem was my width of those divs under the menu was too big (by one pixel ;(

Caused the div's to get dumped under the content div in i.e.

Thanks all for the help. Until next time (Which will probably be fairly soon).

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Thanks for letting us know

Thanks for letting us know Wink

Verschwindende wrote:
  • CSS doesn't make pies