I fear this is a stupid newbee question but i didn't find any info on it (here or elsewhere): how to implement the max-width instruction for IE? I have read extensively about the bugs when max-width is applied to pictures, but, to my desperation, nothing about plain text.
In my stylesheet I have:
P {max-width: 600px}
and Firefox and Chrome duely limit the length of a line of text to 600px but IE (v. 8 to 10) does not. (I verified this on different computers.)
What am I doing wrong? Can max-width not be applied to a paragraph in IE?
What about:
p.paragraph {
display: block; /* just to be sure - it's not needed */
max-width: 600px; /* for most modern browsers (not IE < 8) */
width: auto !important; /* IE max-width hack */
width: 600px; /* width value for IE */
}
What you may find surprising is that max-width is actually working. If you use the F12 developer tools, and select the element, you will see that it's with is indeed 600px (assuming you have filled it with something larger than 600px).
The problem is most likely that your content is overflowing the element. If you want it to clip, then you should set overflow:hidden, or perhaps overflow:auto to see a scrollbar.
See this fiddle:
http://jsfiddle.net/nSJw9/
You can also set word-wrap:break-word if you want it to wrap unbreakable text, although technically css3 changed the name to overflow-wrap, word-wrap is considered an "alternate name" because it's been supported for so long.
http://jsfiddle.net/XuF33/1/
FYI, Chrome does exactly the same thing as IE here, so I'm not sure why you claim it works with Chrome but not IE. Maybe you need to include your HTML
Putting width on the paragraph itself might not be the best practice, put a div around it. IE 8 is said not to support max-width as long as initial width is not set.
Related
http://i.imgur.com/WnRm9aw.png
Seems like an issue with line-height. I have line-height:1 in CSS reset, which seems to be causing the issue. However, even when I set up specific line-height (in pixels) to that element, there is still the difference.
When I remove the line-height property from CSS reset altogether, it does indeed make the gap equal in both browsers, however the orange background - parent - gets stretched by 6 pixels in Chrome.
Is there any work-around? Thanks
I have run into many issues in which browsers interpret CSS differently. One option is to see if Chrome is adding extra padding to the element via a user-agent stylesheet, or by its rendering process. If so, you can see try experimenting with this for an efficient solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start
Another possibility, which is less desirable would be to do this in CSS (detects webkit browsers i.e. Chrome and Safari) and override padding styles so that they appear the same in both browsers:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.yourDiv {
padding: 2px;
}
}
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
I have researched this and found some IE CSS bugs, but none of the known fixes seem to cover this scenario.
This site went live today and the issue that was found is that the logo does not display in SOME versions of IE8. If the person resets IE to factory settings it works, but otherwise the logo is invisible.
Site can be seen here: http://www.ethicsgame.com/exec/site/index.html
CSS to display the logo is
h1 a {
background:url(images/logosmall.gif) no-repeat left center;
padding-left:325px;
text-decoration:none;
color:#1f396d;
position:relative;
top:45px;
left:15px;
width: 325px;
}
it seems to be working fine on my IE8, have your tried adding display: inline-block to its css? Also, for good measure you could throw a inside the a tag.
so you get:
<h1> </h1>
just so it has content...
good luck -ck
Looks like a difference in spacing with IE8 vs Chrome. Check it out in the fiddle: http://jsfiddle.net/5Vt3f/.
Basically your image is probably displaying, just too far to the left that it's not visible.
Also, you have "left" and "center" on the image. This is conflicting. It's either left or center.
Mary,
This has to do with the fact that A tags are inline elements. in IE < 8, the height/width of the element isn't getting rendered--so it's collapsing and becoming invisible. Adding display: block; into your CSS declaration for this element will fix this in IE < 8. You'll want to apply this same principle to other inline elements that you're trying to get to behave more like block-level elements (setting width/height/margin/padding is usually a good hint on this behavior).
If you don't need to support IE 5.5 (which most people don't nowadays), you can also use display: inline-block; (keep in mind that IE 6-7 only support inline-block on elements that are natually inline elements, such as A, SPAN, STRONG, EM, etc.). You can find much helpful compatibility information here:
http://quirksmode.org/css/display.html
You'll probbaly also notice that once you change that display type, the padding which isn't being rendered will be--so you might need to change that markup a bit to compensate.
Using the Developer Toolbar in IE is a great way to test old versions, as well as test these solutions in the older versions.
It works perfectly alright on IE8 but if does not show earlier versions of IE then replace center with left in background attribute.
background:url(images/logosmall.gif) no-repeat center left;
ie8 doesn't support background image position, in your case "left center". If you remove "center left" it should work. You might be able to specify background image position if you specify !DOCTYPE
this displays fine in FF,Opera, IE9, but in Chrome, the images don't display due to a zero width on images
any idea why?
http://drbrent.sideradesign.com/photo-gallery/
thanks
Removing following styling fixes the issue
/* style.css:949 */
img {
max-width: 100%;
}
I'm guessing it's because you didn't specify px or em. upon inspection with chrome, it tells me that the image is 0x313 and your style says width="137"; height="313";
should be width"137px" height="313px". That's one of the problem. If that doesn't fix it, might be something else.
Edit: Like #jibiel said, it's your img{max-width:100%;}
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.