I have a site built in Dreamweaver using HTML and CSS.
The layout is exactly how I want 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 #imagerow just 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]
Related
I have a code in CSS like
CSS
#menu_option { width:100px; margin-left:-50px; }
In Mozila, and Google Chrome and IE9 The menu is on the right position in this code but in IE9 it is moving left and cutting down the images. So I applied
#menu_option { width:100px; margin: 0; }
And this code is running correctly on IE8 but the menu is moving to the right on Mozila, Chorome and IE9.
Please anyone suggest how can I apply both of the code or merge both together in CSS and specify #menu_option { width:100px; margin: 0; } for IE8 and #menu_option { width:100px; margin-left:-50px; } for others.
Here is the picture I am getting in IE8 when I am applying #menu_option { width:100px; margin-left:-50px; }
![enter image description here][1]
but in others(IE9,Chrome and Mozila) I am getting and this is the right one.
![enter image description here][2]
And if I apply margin 0 then It I am getting the 2nd photo on IE8 and on others the picture set is moving right like
![enter image description here][3]
as a rule of thumb, if you want good browser compatibility, don't put width and margin/padding (left or right) in the same element (same with height and margin/padding top/bottom). IE tends to include margins and padding (and border) inside the width while other browsers don't. Try putting a container like a <div> around #menu_option and put the width there, and leave the margin in the internal element, just to see if it makes it any better.
I agree it sucks adding an extra element just for this, but just see if it works and then you can play around with things.
Is there any particular reason why you need a static width? Other than removing that, it may also help to position your element relatively, with #menu_option {position: relative; left: 50px;}, depending on what your putting this menu option into.
I think you're asking for the IE-specific comment codes.
<!--[if IE 8]>
<style type="text/css">
etc.
</style>
<![endif]-->
Though I strongly recommend against using browser-dependent code like this, except as a last resort. Rodolfo's suggestion about separating divs is really the best way to do this.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).
I'm trying to put an x-repeat "grid" of images by using background-image in CSS, then using the id in a DIV tag. My intention is to put a sort of "panel", then always extends to the very top of the page, and loops with repeat-x. It works just fine without a DOCTYPE, but when I put the clean in the code, it pushes the image in the tag downwards, as if there's a margin on the top of the page of about 15 px or so. I tried top-margin, z-index, with no success.
Excuse me if I'm asking a silly question, but I'm sort of new.
Thanks,
-Jacob
It's a bit unclear from your description exactly which method you use for putting your panel at the top of your page, but it seems to me that your panel div is placed at the very top of the body element in yoor HTML code like this:
<body>
<div id="yourid">
[...]
</div>
and if that is the case, you're probably suffering from the default settings for margin and/or padding for the body and/or html elements in your browser (and how they might differ between browser modes - ie. with or without the doctype - in some browsers).
The default settings for these vary between browsers - and a common way to work around that problem is to reset them - for example like this:
html,body {margin:0; padding:0}
If this doesn't help you, please supply some more details (ie. code or a link to the affected page)
A doctype is required of all modern web pages. This sounds like you are fighting the box model when you don't have one. Without a doctype, you are in quirks mode, and all hell breaks loose.
If a browser is operating in standards-mode (which you want, and which is triggered by having a good doctype), then the <body> element has some margin or padding on it. Use body { margin:0; padding:0; } to clear it out and have your elements fill the entire screen.
The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.
I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.
These two images show the error and what its supposed to look like:
http://tinyurl.com/layout-error
http://tinyurl.com/layout-fixed
The page referred to is here: http://tinyurl.com/yb9h34d
Edit: Clear: both; doesnt seem to do anything to solve the problem.
Yes... it looks like a float-caused problem.
Try adding this line into your HTML, just before the footer:
<div style="clear: both;"></div>
I think it is expecting an item that clears the floats.
Try floating the div.container or remove it, as it is useless and a mild case of divitis.
In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:
clear: both;
This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.
Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp
What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.
I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).
Why does DIV#footer have display:none on it?
Anyway, if you float: left on .footerWithRightAndLeft you should be ok.
You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.
I have been working on a site for a client and I am about to wrap it up.. but unfortunately IE6 is being a pain in the buttocks.
My main problems are on this page:
http://seaport.bythepixel.com/#storage
The list items dont have bullets
The spacing below the floated items are not being cleared correctly. I applied "clear:both" to my h2 tags and it is clearing.. but the spacing bellow the floated items doesnt seem right. If you compare any other browse with IE6 you will see the spacing issue I am speaking of.
maybe this is just an IEtester problem, but the background image I have applied to "#full" stops and starts randomly. You can see this on the storage page and the floor plans page. I am referring to the gray to white gradient that separates the left navigation column with the right content column.
Any help as always is greatly appreciated!
1) and 3) are clearly the hasLayout bugs. You need to give the elements in question a "layout". Start with giving the #full a position: relative; (validates) or a zoom: 1; (doesn't validate).
2) is likely caused by odd use of overflow: hidden; here and there. Try removing it all and see if that helps.
When you set an overflow (hidden if possible) to all floated elements there might already be a lot of problems solved.
maybe this is just an IEtester
problem, but the background image I
have applied to "#full" stops and
starts randomly.
I can confirm i see this on a machine with IE6 only installed.