Browser compatibility problem

Six6siX

Six6siX

Six6siX

Soldato
Joined
25 Nov 2004
Posts
4,788
Location
Hertfordshire
Hi, I started using wordpress and have been running for a while now, getting more familiar with how things are working and adding some of my own stuff code wise. :)

My main problem is this:

There are some problems with layout between browsers - specifically IE7 (mainly) and Opera (not so bad) - see screenshots

IE7
ie7.JPG


There should be a couple of bars going across the page where the white boxes are.

Opera 9
opera.JPG


There is no space between the lower bar and the header images, but the top one displays fine.

Everything displays perfectly in Firefox. :)

I have already sorted out a few issues (mainly relating to IE handling CSS) like borders around images and specific font sizes and styles being displayed differently, but this one has me stumped.

I'm assuming its a CSS problem?

Any advice would be great - site link here :)

Also, if anyone can test in other browsers (IE6, Safari, different versions of FF etc) it would be appreciated
 
The problem with the <hr /> element is that it renders differently in IE from other browsers, which can make it difficult to style consistently. The best solution for the appearance of the <hr /> element you want, is to wrap it in a div and then add the appropriate attributes in your style sheet.

XHTML
Code: 
<div class="hr"><hr /></div>
CSS
Code: 
div.hr{
background-color: #22201d;
border: 1px solid #363430;
width: 760px;
height: 10px;
margin: 10px 0;
}
	
div.hr hr{display: none;}
This isn't the best solution, but it's the only way I know to achieve the styling you want.
 
Last edited:
that's such a messy way of doing it though. why not just have the div there and use borders and background shading rather than an hr? i always have trouble with those little gits.
 
They're not that difficult to style across most/all browsers if you keep them simple. But Six6siX wants something a bit snazier than normal, which makes it difficult. For instance you could just have:

Code: 
hr{
border: 0; 
border-top: 3px double #363430;
width: 760px;
height: 3px;
margin: 10px 0;
}
Which is a lot simpler and will look pretty much the same in browsers.
 
Hey thanks for the replies.

Using the first method that Mr_L posted, gives exactly what I was looking for - perfect result in FF and IE7.

Still getting the problem in Opera with the lower of the two elements in the header being too close to the images though - I can't see what it could be - I'm guessing a line break of sorts is needed...? I've tried playing about with margins and paddings but with no luck.

I tried using the div method, as suggested too, but it wouldn't display as I wanted it to - probably something i'm doing wrong :p - but that didn't seem to sort the Opera problem either - the element was still displayed too close to the images.
 
You must log in or register to reply here.
Back
Top Bottom