CSS Gurus: Quick Help

[Alien]

Any CSS Experts here?

I have a <div> with content that wouldn't display the desired content vertically at the top of the page. After fiddling around with various options I discovered that removing the

clear: both;

in the CSS fixed the issue, in everything but IE7.

IE7 still stubbornly refuses to display the content at the top of the page. Tried adding

vertical-align:top;

etc too, no joy.

Any ideas?!

Thanks all.

 

[Tricky1]

Whats the url ? PM me it if you don't want to post it..

 

[Alien]

Whats the url ? PM me it if you don't want to post it..

Hi Tricky - thanks for that. Unfortunately can't post it, as it's in offline mode to all but logged in admin.

Is there another way?

 

[chippyb]

I have had the same probs with ie7, after hours i gave up and thought how many people are still on ie7 and thought sod them haha

i know not the best but sometimes its really not worth it, only thing i can think of doing is email the css and html file to someone to look>

 

[lethal0r]

I have had this problem before, trying to remember the exact solution.

where does it show in ie7? have you tried shrinking the width of the div next to it, to see if its a padding issue?

 

[seemly]

If you have an absolutely positioned element directly after a floated element, IE7 bitches about it. A way to fix this is:

<!--[if ie7]><div></div><![endif]-->


If you have a floated element and don't define a width for it, IE7 will bitch about it (causing a "thin column" of content that breaks the layout of the page). The way to fix this is to apply a width to the "thin column" element.

If it is something else, advising how to fix it will be impossible without seeing it.

 

[Alien]

Many thanks for all the help everyone, it's much appreciated.

I understand it's difficult to give exact advice without seeing it. I might have to try and get some screenshots/code up if it helps.

Anyway, been experimenting.

If I use CSS as follows:

.holder {
	width: 100%;
	height: 100%;
	background: transparent;
	position: relative;
}

- All looks fine on Chrome, FF, etc with the <div> content. On IE7, the <div> content is not vertically aligned to the top though and falls downwards as usual.

If I change this to a small width, e.g 1%, say:

.holder {
	width: 1%;
	height: 100%;
	background: transparent;
	position: relative;
}

- All looks fine on IE7, but messes up the other browsers.

Very strange - I hate IE! :roll:

Cheers all - any ideas?!

 

[Tricky1]

Pretty sure your going to have to produce a seperate stylesheet for IE7 which unfortunately is the norm. You've got my contact details if you need any help.

 

[Alien]

Pretty sure your going to have to produce a seperate stylesheet for IE7 which unfortunately is the norm. You've got my contact details if you need any help.

Thanks Tricky1.

It's frustrating, as it's only a small bit of .css in question, but if that's the only way...!

 

[Tricky1]

You only have to add the elements that you want to override from the main stylesheet, not the whole thing..

 

[Alien]

You only have to add the elements that you want to override from the main stylesheet, not the whole thing..

Yeah, all done now, I was just moaning I had to do it, lol.

Added a conditional comment <!--[if IE 7]> etc and that seems to have done the trick.