I've been banging my ahead on this IE7 bug for the last few days and it's time to resort to the mind of the crowd.
I have the following HTML and CSS: http://beerpla.net/for_www/ie7_test/test.html
The goal is to have a <ul>, with each <li> containing a small icon and some text. Multiline text would be aligned to itself and not wrap under the image.
I've tried using float:left on the image and a bunch of other things, and finally I thought the position:absolute would work for sure but in IE7 I consistently see the text pop off to the next line and get misaligned with the image:
This is what I expect it to look like:
I even tried to make the div display:inline which kind of worked but then started wrapping under the image for long lines, so it was no good. zoom:1 also produced a similar effect.
I'm at a loss at the moment. This code works fine in all other browsers. IE7 is a special, very special child.
Any ideas?
Thank you.
Edit: If you have IE8, you can emulate IE7 by pressing F12 and then Alt-7.
instead of putting the image as an element, try using background property. like so
ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }
note: you might have to adjust the padding to suit the distance you want to maintain between the image and text.
Try using padding on the li instead of margin on the div. If display:inline worked, it's probably IE choking on working out the div's box model in some arcane way: padding on the li and maybe display:inline on the div may iron it out.
Moving the <img> tag into the <div> fixes the issue. Still unknown to me why IE7 does what it does.
Go back to floating your image left, and then add overflow: hidden; to the div. The text will no longer wrap below the image, and there are no side-effects unless you are trying to position content from inside the div out (don't see that here). Completely compatible cross-browser. With IE6 you simply need to add hasLayout by any means to get the same effect.
Related
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
Here is my site:
http://smartpeopletalkfast.co.uk/ppp/welcome.html
In Firefox and IE8 it's fine, but in IE7 the down arrow image to the right of the big 'CHISTOPOL' heading is further down that it should be. It looks like its being pushed down a row, as if the 'CHISTOPOL' text is taking up 100% of the width.
Why is this happening and how can I stop it?
Not sure exactly what the problem is but it also happens in IE6.
You could apply the following CSS
#welcome-title-bottom {
position:relative;
}
And then add style="position:absolute;right:5px;" to the "arrow" anchor and remove the class="right" which fixes the problem for me in IE6.
Personally, I try to avoid using CSS float when I can due to these sorts of cross browser layout issues.
Try removing width:auto from #welcome-title-bottom a see if it helps.
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/