HighDots Forums  

CSS help for horizontal & vertical lists

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss CSS help for horizontal & vertical lists in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
threeandcats
 
Posts: n/a

Default CSS help for horizontal & vertical lists - 11-23-2004 , 12:10 PM






Hello,

I'm new to CSS and trying to make page navigation that is fluid so that
resizing the text doesn't trash it. At a minimum, it must work on Mac and PC
with Firefox 0.10 and IE (5.2 for Mac, 6.0 for PC). Yes, I'm a masochist .

Page with embedded CSS is at
http://home.comcast.net/~ckeleher/test/test-archival/pages/navemb.htm Problems
are described below in order of functional importance.

1. The second layer of horizontal navigation (basics, protect yourself, etc,
id=#subnav) displays vertically instead of horizontally on Mac IE5.2 and PC IE
6.0. I can get it to display horizontally by setting pixel widths for each li,
but that defeats my desire for a fluid display. Is there another way to make
IE display floated li horizontally?

2. To make the tabs work, each of the upper horizontal tabs (body, cells,
genes) is set to switch their bottom border color to match the #subnav color
when the "here" class is applied. The upper tabs must be on top of the lower
#subnav for this to work, so their matching color covers up correct section of
upper black border on the #subnav. The only way I could figure out to do it
was using stacking, but that meant I had to give the #nright container and
#subnav absolute positions so I could give them z-indexes. It works, but the
static position of the #subnav means that the upper tabs overlap the lower
#subnav when the browser text size is increased, again defeating my desire for
fluid display. Is there another way to put the tabs on top of the #subnav and
position #subnav so it is always just below the upper tabs? Or another way to
make the upper tabs look like part of the lower subnav when the "here" class is
applied?

3. In PC IE 6.0 only (not in Mac IE 5.2) the text-transform: uppercase;
command in the "here" class seems to bleed down and apply to the li below the
one where the class is applied. This is in the left vertical nav bar, the
"here" class should only affect "Cancer is not catching" in the #sub ul, it
should not affect "Cancer is caused by damaged cells." What is the cleanest
way to fix this?

4. In Firefox 0.10 on Mac and PC, there is a white space in the horizontal
blue background at the top of the page that fills in when the browser window is
resized. It's not consistent though--it only seems to happen when the page is
first loaded. If I close the browser window, open a new one, and go to the
page it's fine. Do you see this? Can I fix it?

5. Any other suggestions for improving my design or correcting CSS usage are
appreciated. Did I mention I'm new at this?

Thanks!



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.