I cant get rid of the gaps between divs when i scale or zoom the web page. In firefox it works like a charm, but when i try i IE9 1px row appears down, but nowhere else. If i try with safari, at "real size" or 100% zoom, it works, but as soon as I change the zoom, increment or decrement, i mean, zoom in or zoom out tons of rows appear. With Chrome is the same; 100% is ok, 110% is bad, 115% gets better but not perfect....
I tried this;
margin-top:-1px
but after appliying it here and there, as soon as I zoom in or out, new 1px rows appears
also tried the
border-radius: ;
-webkit-border-radius: ;
-moz-border-radius: ;
but didnt work either.
It could be something related to the fact that they are all absolutes? I wont export anything again from photoshop, but i would like to finish with this
THANSK!
P.S.; here is the url
http://www.butterfly-paradise.com/
I think the seams are coming from a combination of absolute positioning and having a bunch of images butting up against each other with a different background color. The larger problem is that this is not a great way to do layout.
The seams don't impair the usability of the site, and it's relatively rare that people even use browser zoom, so it's up to you whether it's worth it to fix.
If you want to try fixing it, I'd recommend starting from scratch. There won't be any way to fix it from within Photoshop, and trying to edit the code it generated would take longer than just doing it over. You could try something like Dreamweaver, or even coding it by hand. If that sounds too intense, just leave it. But if it sounds kind of exciting, go for it.
Related
This code works fine in Chrome and Firefox. But in Safari, the drag handle won't work if there is padding beyond 11px.
Is this a bug in Safari, or is there something silly I'm missing?
<style>
textarea {
padding: 11px 16px;
}
</style>
<textarea>Stuff goes here. Does my drag handle work?</textarea>
I ran into the same problem yesterday, and have unfortunately not been able to find a direct solution to this problem.
As an alternative, you can ditch the resize handle entirely, and look into making your text area auto-resizable. Personally, I feel like this makes for a better design anyways. You completely avoid the problems of the resize handle, and your users get the additional space they need for their text, without having to mess around with a tiny handle themselves.
This post has some good examples on how this can be achieved.
This might be a poor question for this exchange but is it worth styling for zoomed out browsers? For instance, I can zoom chrome out to 25% and my navigation breaks, should I accommodate for this or will 99% of cases be fine without the extra effort in styling? What case would I run into problems like that?
25%? I wouldn't worry about it unless you have a use case for your page where your users will be that far out.
Now, 75%-125%, you might consider it. Usually your page will work fine at other zoom levels. If it doesn't, it's likely because you have hard-coded something you shouldn't have. (For instance, you might assume that text on a certain line will never wrap. That isn't a good assumption. Different devices use different fonts, which could cause text to wrap in some cases.) In those cases, make sure to only set the sizes to specific values when needed. Let the page flow as much as possible.
Probably not.
A good responsive design and sticky footer might work around this issue. That said, how many people zoom out this far?
See Marshall Roch's comment towards the bottom of that link - he says a small percentage have 1 zoom level off normal on facebook. So to zoom all the way to 25% seems quite extreme. I suspect any users who DID use that zoom level would be used to sites looking weird.
I'm having an odd problem with some floated divs on this page that I'm working on. There are 3 of them across the page, with 1em margins between. In Chrome they line up perfectly, but in IE and FF, the right hand one drops a little - but not all the way below. I thought this might be best described with a picture, please see below:
I can't work out which bit of the CSS is causing this - I've been through the new FF code inspector and highlighted all block level objects with the webdev toolbar but can't see anything that would cause such a drop.
I did wonder if it was something within the JS twitter feed causing it, but I've swapped round the Twitter and "Update" boxes and it's always the right-hand one. I've also tried removing additional elements from the page - everything between the menu and these three boxes.
I must admit, I'm at my wit's end! Can anyone spot something obvious I've missed? The CSS is fairly large, and I'm not sure which bit to show, so I haven't copied it in in, but will do if anyone desires. Otherwise everything can be viewed at http://www.woodexperts.com
Change width: 15.25em in div#main div.tricolumn to width: 15.24em
That should take care of the issue.
I understand that this is a hack, but if IE is the only browser causing problems, you might want to consider IE conditional comments that restrict certain styles only for IE:
http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx
My client is upset that the image slider on his homepage does not slide the correct distance when the browser zoom level is not at 100%. You are able to see half of one slide and half of another slide at the stop points. I have looked for CSS styles that might prevent zooming on these elements and tried to fix it with JS, but no luck -- and I'm not certain it's even possible to fix.
The slider can be found here: http://petropower.com/
The issue is reproducible in Chrome and IE, so I assume FF as well. Anyone know a trick that might work? Many thanks.
In situations like this, it's worth explaining to the client that many/most big websites have layout issues when the zoom level is adjusted. We do what we can with the technology we have.
I have a fairly far-out box model for my portfolio website. It's actually really not but it required a little CSS magic to get the chamfer corners to work (I really wonder why chamfer corners do not exist in CSS). See it here.
Now, if you're on Firefox, and you navigate to my resume, you'll see a very mysterious margin going on at the top that I just can't seem to figure out. I was wondering if anyone could poke around with the Firefox dev tools and possibly figure out where this is coming from because I can't seem to figure it out. You may also notice a few other little graphical glitches on Firefox that are not present in any other browser, but hey, what can I say, I like that box look and I ain't gonna compromise.
Image depiction (from FF7.0.1, win7):
Add display: inline-block; to .box_content.
Not sure whats causing it but that should fix it. At least it did on my computer.
Validate your html for that list of errors that needs fixing. Then validate your CSS. I didn't run through that.
I rebuilt the "resume" section from the ground up. During this process I noticed a lot of margins being added to titles and such before I would edit the CSS classes that weren't added in other browsers. Margins seem to affect the "height=100%" rule as anyone whose tried to get a footer to stick to the bottom of their webpages might have figured out. So I chalk this one up to one of the titles getting a margin from one of Firefox's standard CSS stylesheets, I just couldn't find it.
Lesson of the day: ALWAYS set padding and margin to 0 for any custom class or id!