469,626 Members | 883 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

Positioning good in Firefox, but not working in IE

Hi folks.

Please try not to laugh at my web design noobness, I'm a photoshop monkey, but I thought I'd have a go at updating this website to learn css & html, it's far more complex than I'd anticipated.

I've managed to cobble this much together, the css even validates:

http://www.accesscomms.com.au/Newsite2/

It displays nicely in Firefox but gives IE7 (and presumably IE6 & below) serious indigestion, it seems hellbent on positioning the first round cornered box on the line below the vertical menu, rather than next to it.

I think the problem must be in one of the following code excerpts somewhere, but I've no idea where :(

I've cut out all the bits I thought weren't relevant to this issue - I really am the n00biest of all n00bs, if I need to add more info for anyone to help, please let me know & I will.


The CSS

body {
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
color: #53565D;
font-size: 11pt;
}

#content {
width: 734px;
margin: 35px 0 auto;
}


/*Vertical Menu */


#VertMenu p {
margin:0 0px;
}

#VertMenu {
background: transparent;
float: left;
width: 150px;
padding: 0px 0px 0px 0px;
margin: 0px 0 auto;
}

/*Rounded Corner boxes*/

.roundcont {
margin: 0px 155px;
width: 579px;
background-color: #f0f0f0;
color: #53565d;
}


.roundcont p {
margin: 0 10px;
text-align: justify;
padding: 10px 0px 10px 10px;
font-size: 11pt;
}


.roundtop {
background: url(Borders/tr2.gif) no-repeat top right;
}


.roundbottom {
background: url(Borders/br1.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

Can anyone see the issue here?
Any help or advice on bashing this into shape in IE would be very very much appreciated.
May 8 '07 #1
1 1453
ZOMG

I figured it out!!!!!!

In CSS I added absolute position to the vert menu css:

#VertMenu {
position:absolute;
margin: 0 0px;
background: transparent;
float: left;
width: 150px;
padding: 0px 0px 0px 0px;
}


Then added the <div id="content">

to above the <div class="roundcont"> as well as above the<div id="VertMenu">

I'm too n00b clueless to know why it works, but it does.

:D :D :D
May 8 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Charles Harrison Caudill | last post: by
2 posts views Thread by Andre | last post: by
2 posts views Thread by TheCruelPanda | last post: by
1 post views Thread by rhino | last post: by
3 posts views Thread by LayneMitch | last post: by
20 posts views Thread by mehstg1319 | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.