Menu
Hello every one I have been working on a simple little site that is now up on a test page. I’ve looked it over on most of the major browsers and it looks good. No CSS crap-ups. But when I look it over in Safari I’m getting a problem with the second left DIV box its like it moving up and I’m not sure why.
Here is a link to the test page: [url]http://www.johncliffordtaylor.com/hsgs/
Plz take a look at my code:
The HTML that holds the First Div box and the list items then the second Div box:
[code]
<!– Begin Left-Column 00: Navigation –>
<div id=”leftcolumn_00″>
<ul id=”nav”>
<li id=”nav_items_00″><a href=”index.html”>Home</a></li>
<li id=”nav_items_00″><a href=””>Service</a></li>
<li id=”nav_items_00″><a href=””>Gallery</a></li>
<li id=”nav_items_00″><a href=””>Events</a></li>
<li id=”nav_items_00″><a href=””>Blog</a></li>
<li id=”nav_items_00″><a href=””>About</a></li>
</ul>
<!– Begin Left-Column 01: Contact –>
<div id=”leftcolumn_01″>
</div>
<!– End Left-Column 00: Navigation –>
</div>
<!– End Left-Column 01: Contact –>
And then the CSS code around these divs:
[code]
#leftcolumn_00 {
background: #4d4d4d;
float: left;
width: 183px;
height: 145px;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 5px 5px 0px;
}
#leftcolumn_01 {
background: #4d4d4d;
float:left;
width: 183px;
height: 248px;
padding: 10px;
border: 1px solid #ccc;
margin: 5px 0px 0px -11px;
}
Now please note that I’m very new to building sites with divs and CSS so I’m when I was trying to find a way to place the second div box (leftcolumn_01) I kind of placed it inside the first div tag (leftcolumn_00) I’m talking about this bit of code right here:
[code]
<li id=”nav_items_00″><a href=””>About</a></li>
</ul>
<div id=”leftcolumn_01″>
</div>
</div>
I’m pretty sure that isn’t the best practice, I was kind of tired at this point and struggling to find a way to place one div box right under another. and might be whats causing the problem but any suggestion on whats going on would be great. Thx you so much for the help!
John