Positioning divs

HTML & CSS
1

Hi there,

I am having trouble getting one of my divs in the proper position:

http://www.ladyluxeinvitations.com/burl/index2.html

I need the News and Alerts box to be right beside the rotating content box.

I’ve been trying to make adjustments to the CSS but I’ve had no luck!

Any ideas?

Also, I am having trouble with how my menu is displayed in Firefox. It appears like so:

:confused:

Thanks in advance!

2

I am learning so much from you!!! Thank you, thank you!! :stuck_out_tongue:

Unfortunately my workplace is still using IE6 only…I know! Shudder…

So I have to make sure it looks okay in IE6…I’m actually presenting this to management tomorrow morning!! :eek:

3

Ah I didn’t notice the hover state…my bad :slight_smile:

To vertically align a single line of text, set the lineheight to match the height :slight_smile:

#newsEventsTitle{line-height:36px;}

And…that’s IE6, do you really want to worry about a pixel difference in an ancient browser?

I’ll certainly try my best to debug it if you deem it absolutely necessary, but IE6 users need to learn to start dealing with it…it’s the only way to get an upgrade to happen :slight_smile:

A lot of your CSS is not targeting IE6 because of your use of html>body (the > isn’t supported in IE6). That’s a possible reason (though I’m just skimming over the CSS) :slight_smile:

4

Try this, remove the border on “#menu li a”, then on “#menu li a.norm” change the background position from 100%, to 99% :slight_smile:

Far as positioning-remove clear:both on “#newsEventsContainer” and then on “div#header2” add float:left (to get them lined up)

Add margins to position it accordingly :slight_smile:

5

Thank you…that fixed the overhang problem although the dividing lines are still showing up black when they should be white.

In terms of the panels under the menu…I’d like the News & Alerts box to be beside the rotating featured content like so:

Thanks again!

6

Yeh! Definitely getting closer!!! :smiley:

So the News and Alerts box is now in it’s proper position…just need to figure out why the text isn’t vertically aligning in the middle of the green tab.

As for the menu fix…it is now showing fine in Firefox. I didn’t remove the border from #menu li a because when I tried doing that the blue border disappeared in hover state. However, changing #menu.li a.norm to 99% did the trick.

Unfortunately, it messed things up a bit in IE. Please see below:

:confused:

7

Hi, to get the maps next to the news area, just float the news (since it’s first in the HTML it must be floated)

#footerBanners{float:left;}

The overhanging border thing-the overall height is too great-lower it to 1.5em instead of 1.6

#menu li a{height:1.5em;}
8

I’m getting closer…managed to fix the gap in IE6.

The only thing I can’t figure out is why there is about a 1 pixel shift on the drop down panel…it doesn’t line up with the menu item above it.

Also, in IE6, my popular topics banner at the bottom has space above it…it appears fine in Firefox.