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%;}
Related
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.
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
In iPad an iframe doesn't display the shadow properly if its position is fixed.
position: fixed http://jsfiddle.net/akRsC/
position: static http://jsfiddle.net/akRsC/1/
Anyone knows how to fix this aside from removing position:fixed?
EDIT:
For some reason, the shadow is displayed when viewing the example inside jsfiddle but not in jsfiddle '/show' which is why this was my original link. I don't know why and I don't know how to make the css rules that make it work inside jsfiddle.
Did you try:
-webkit-appearance: none;
? Was useful to me for a lot of weird CSS stuff (but nothing to do with box-shadow).
And also, take a look at: http://cubiq.org/webkit-weird-box-shadow-bug-with-fix
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 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.