site layout messing up in IE only
I have a site built in Dreamweaver using HTML and CSS.
The layout is exactly how I wan开发者_高级运维t it in all browsers (Chrome, Firefox, Safari) except for Internet Explorer 7 where the layout of the bottom row of images or image is totally messed up - either too high or too much to the right. I have no idea why this is happening, I am a beginner and have tried all I can think of, if anyone can help that would be much appreciated.
The site is here: http://www.mediadarling.co.uk/clients/lenistudios/
Thanks in advance!
There’s a couple of bits in your CSS that I don’t quite understand:
#movers-row {
...
margin: -120px 0 0 120px;
Why the negative top margin? This seems to be what’s pulling the images up too far in IE 7. I don’t really understand why it’s not in other browsers; something to do with the floats involved I guess.
#footer {
...
margin-top: -130px;
Is this related to the other negative top margin?
Anyhoo, I think you can fix your issue in IE 7 by:
- Removing those two negative top margins
- Adding
margin-top: 10px;to#imagerowjust in IE 7 (and possibly IE 6) (the padding top doesn’t work with the floats for some mysterious IE reason)
See here for example code: http://www.pauldwaite.co.uk/test-pages/5220698/
You’ve also got a couple of validation errors in your HTML. I don’t think they’re causing your issue, but I fixed them first, because when you’re trying to track down an IE bug you really don’t want validation errors in there. Here’s the validation of the page.
After: <div id="rotxt">Roll over images to see larger versions</div>
Place: <p class="clear"><br /></p>
The .clear contains the CSS: clear: both;
you can use conditional statements for IE, here's an example:
<!--[if IE 7]><link href="css/layoutIE7.css" rel="stylesheet" type="text/css" /><![endif]-->
This is placed at the <head> and assumes that you have an extra css file with the IE corrections.
P.S. you need to add your IE specific CSS rules into the IE CSS file, that way it will work in IE and most browsers...
In my example, I used the "if IE 7", means if it is IE version 7, but you could use combinations and other versions.
EDIT: surround the Dear guest, text, image and the div #rotxt with another div and make sure it actually surrounds it with a simple rule:
.surround {height: auto; overflow: hidden;}
this is cross-browser, no need for the conditional CSS.
EDIT 2: Ok, the problem here is in several places... You're floating the image to the right, ok I suggest surrounding the title + text + caption with a div with a float left. Then surround both the image's div and the new div with an aditional div. This one with a height: auto and overflow: hidden. Then remove the float of the images main div, and remove the top margin; Finally, it would be best to add the orange rectangle as an element that comes after the images block (this way it's guaranteed that the social div comes in the right place).
So, my suggestion is something like this (sorry for not real tags):
[new surrounding div] [main image div] image [/main image div]
[surrounding div] title text caption [/surrounding div] [/new surrounding div]
[images div] images [/images div]
[sepatator div] (optional) [/sepatator div]
[social div] [/social div]
加载中,请稍侯......
精彩评论