I noticed the navigation li items (yellow section) were right of center, so I altered the containing div/nav widths and background background colors just so I could see what was going on in an attempt to fix the misalignment; however, I can't seem to see a reason why this is occurring (in about 6 browsers).
Here is problematic markup/css: http://building-more.site50.net/
It seems to work fine in jsfiddle: http://jsfiddle.net/cTXXH/1/
It doesn't seem to display at all in IE, what is going wrong here?
Also, it looks like you forgot the ending bracket in your endif statement for the IE check.
Should be:
<![endif]-->
It's because some of the elements already have default values such as padding and marging that are skewing your positionings, and this could be different for each browser. That's why people often 'reset' CSS to use 0 margins and 0 paddings by default instead, before starting with their own styles.
Your example works fine in your Fiddle because 'normalize CSS' is checked. This is a framework similar to CSS resets which can be found here: http://necolas.github.com/normalize.css/ - it makes sure that your default positionings are consistent between browsers, and gives you a clean slate to work with.
If you were to include it into your web page it would solve your issues. Hope that helps.
Related
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
In my website, there are lots of buttons. When viewing in Chrome, the button width just fit on the dynamic button text, but in IE, I can see extra padding are produced on both left and right...
Would there be any CSS rule that can allow me to take away these padding? Thanks.
Might be a bit late, but when I searched SO for the very same problem today I found this question. Obviously, this is no real padding (in a sense that it cannot be turned off by padding:0px), but rather one of those weird oddities that we all love so much about IE. (Note how the false padding scales with button text length O_o). Fortunately, there is a simple solution to it, as described here.
Basically you only add overflow:visible; to the button (I did not need the extra width:auto;as described there). Don't ask - it's absolutely not what you'd have thought this should do, but well... It's IE Land and the rules are different over there. Just note that this apparently does not work when your buttons are inside a table cell.
I guess the CSS reset might have solved this, because someone already included this in some global declaration. Just adding this answer to shed some more light on the how and why.
Never give up, people - our children will see a world without IE quirks... One can hope.
You can use reset css as it avoids browser inconsistencies.
Please refer http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Visit http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ for reset.css
Managed to avoid extra spacing in IE with extra statement display:block; in CSS like so:
.menu button{
display:block;
width:100%;
padding:0;
}
Note that I didn't use width:auto as it wasn't an option in my case - buttons are empty, width is taken from parent div.
I'm not sure that this will be easy to explain without just showing you so here is an example -
http://jsfiddle.net/46gL8/1/
When viewed in FF, Chrome, and IE8/9 the example works as expected. When viewed in IE7 the nested UL is rendered inside of the parent despite both being positioned absolutely. Things like z-index make no difference and the only fix was to remove the filter: line from the shadow class.
I suppose it would be fine to just render a regular border or something in IE7 but it would be awesome if anyone had any insight!
It looks like the filter cuts off all content that falls outside the filtered box. If you remove the submenu from the hierarchy of the main menu, it does work. See: http://jsfiddle.net/wyDTQ/
Of course, I don't know how you're constructing your menu, so that might not be what you want. It does fix your issue, though.
Seem you only need an explanation rather then a solution. Everything you need to know about the filter property is explained by Microsoft at http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx, no further details is given to why or how it works in certain scenarios.
I've noticed that some browsers have trouble with margins, especially when an element is floated. For example, this website I'm doing looks fine in Firefox, but IE7 screws up the margins completely it seems. I also testet it on several Linux browsers as well and some of the make similar mistakes.
The site is
http://w3box.com/mat
This looks fine in FF3.0 as far as I can tell. Haven't seen it in FF2 yet, or IE6.
Why does this happen? Is it because I've got floated DIVs with specified margins?
Are there some things I should avoid or should have done differently?
Edit: So it looks like my tags was the source of the screwup.
I'd placed images in the that was not defined in the CSS and that had floats on them, combined with margins. These screwed up everything and I have to redo these.
Also, some stuff happened when I used XHTML Strict instead :)
Thanx everyone! I'll try to fix this on my own :)
I disagree with using a library if you want to learn about CSS part of the curve unfortunately is learning about the ways different browsers react to CSS. I wouldn't even suggest using a reset stylesheet. If you are going to be doing this a lot learn how CSS works. If you use a library or a set stylesheet which you don't understand how will you fix it when it breaks.
Marging are not bad, but IE has some troubles with the margins of float elements. While there are many recipes for fixing, I believe that in your case you may use absolute positioning instead of float+margins (you don't really need "float" behavior when the image is wrapped by text)
There is nothing wrong with using margins.
Old versions of IE have one bug and that alone isn't nearly enough of a reason to avoid using one of the core layout features of CSS. Specifically, this bug occurs in IE when you float an object and give it a margin in the same direction, e.g.:
.whatever {
float: right;
margin-right: 5px;
}
You can deal with this a number of ways, depending on your layout. One way would be to add another div around your box and use padding on that to replicate the same space a margin would.
I'd suggest using some form of CSS Framework (Blueprint CSS, 960 Grid, etc) as they have a number of margin, padding and other common HTML element resets. You should find cross browser development is easier using a framework.
Different browsers have different ways to handle box model. Most of the time the sites which are displayed well in FF, Chrome or IE8 can have problems in IE6 and 7.
To workaround this problem you can try to set all the default margin and padding to 0 (and adjust them as needed on specific elements):
*{ margin:0px; padding: 0px; } //Simplest rule...
To see more on CSS reset you can look at: http://meyerweb.com/eric/tools/css/reset/
And then apply different styles for IE7 and 6 with conditional comments.
As mentioned on other answers it's to do with IE's interpretation of the box model.
Whenever anything is floated IE tends to double the margins specified. This can be fixed with an extra stylesheet for IE using conditional comments.
See also: http://www.positioniseverything.net/explorer/doubled-margin.html
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.