homepage Welcome to WebmasterWorld Guest from 54.204.127.56
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Placing boxes beneath BrotherCake's UDM4 navigation
Attempting to position boxes beneath navigation without absolute position
grfxgirl




msg:1219570
 3:54 pm on Jul 2, 2006 (gmt 0)

I have a site which uses BrotherCake's UDM4 navigation. Using absolute positioning, I am able to place items below the navigation but there is overlap in some browsers and when text size is increased. When I try to position the boxes within a div that wraps the UDM4, they stack over the navigation.

Basically I need some hints on placing items under the UDM4.

[html sample]

<ul id="udm" class="udm">
<li><a href="index.htm">Home</a>
<ul style="width:12.5em">
<li><a href="blah/index.htm">Blah</a></li>
</ul>
</li>
</ul>
</div>
<div id="boxes">
<div id="work">
<h4>Nifty Title</h4>
<p><a href="nifty.htm">Nifty Link</a></p>
</div>
<div id="info">
<h4>Information Title</h4>
<p>Information Copy</p>
</div>
</div>

[css sample]

#boxes {
position: absolute;
left: 52px;
top: 426px;
width: 140px;
}
* html #boxes {
top: 388px;
}
#work {
background: #f7efe2;
border: 1px solid #e39e3e;
font-size: 80%;
position: relative;
width: 140px;
}
#work h4 {
color: #187f47;
font-family: Arial, Lucida, Helvetica, sans-serif;
font-size: 95%;
line-height: normal;
padding-top: 6px;
}
#work p {
line-height: 140%;
padding: 4px 4px 0 4px;
}
#info {
background: #ecf3eb;
border: 1px solid #accdb8;
font-size: 80%;
margin-top: 8px;
position: relative;
width: 140px;
}
#info h4 {
color: #187f47;
font-family: Arial, Lucida, Helvetica, sans-serif;
font-size: 95%;
line-height: normal;
padding-top: 10px;
}
#info p {
line-height: 140%;
}

[The UDM4 css out of the box with positioning/size tweaking]

Thanks.

 

a0731370




msg:1219571
 11:58 pm on Jul 2, 2006 (gmt 0)

Are you using Internet Explorer to test
this out or Fire Fox?

grfxgirl




msg:1219572
 12:55 pm on Jul 3, 2006 (gmt 0)

I have checked on IE6, IE7 beta, Firefox on windows, Firefox on linux, Opera 9 on windows, and Netscape 8.1 on windows. Being able to place the boxes beneath the navigation relatively positioned would negate my need to cross browser hack.

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved