Div positioning in IE7

HTML & CSS
1

hI, i am looking for help with an issue in IE7.

the alignment of certain elements are not right and have moved position.

it works fine in IE8 and FF.

i have just taken on this job so i am unclear how they have implemented the code etc. i think the code is filtered from our main website.

i am looking for advice on what the problem may be with the positioning and the solution.

this is the link to the page

Get Your Business Found by More People

I apologise if i am being vague

thanks
forry1

2

Hi,

Welcome to Sitepoint :slight_smile:

That code is a bit of a nightmare to work with all the inline styles, however you may be able to fix the header by changing the inline-block style to float left instead.

Here:


<div id="brighton_header"> <span class="logo"><a style="display: inline-block;[B]float:left;[/B] border: medium none;" href="http://www.brightfire.co.uk"><img src=

Add float:left as shown above.

Note that span class="logo cannot be a span as spans cannot hold block elements. It should be a div.

3

hi, thanks for the help. i will give it a go.

Can you tell me why the footer elements are out of alignment aswell.
is this caused by the top nav moving position.

thanks again

4

The footer is incorrect because you haven’t adjusted the default left margin on the uls. The inline styles only remove left-padding and only some browsers use a default of left-padding while others use left margin.

As you have no class or wrapper on those elements you will need to either add a parent class and address the uls within or just set all uls to zero.

e.g.


ul {margin-left:0}

Or write the inline styles for every ul in that section.


        <ul style="color: rgb(152, 152, 152); list-style: none outside none; padding-left: 0p[B]t;margin-left:0[/B]">
5

excellent.

I will give that a shot.

Appreciate your help with this.

have a good day

cheers