if someone could help on the following would appreciate this as I spent the whole evening without result on this issue.
I have a site where I want to modify tags appearance after every article.
The problem is that firefox (version 14.0.1) provides smaller height for the text (total <a> height is 15px icnluding 1px bottom padding), while chrome and rest browsers give height 19px. So the difference is 4px. Because of this - the "tag hole" is displayed at different levels. A little bit lower than vertical middle for FF and upper than middle for rest browsers.
I made a picture to get the problem easier:
I have general css reset, so that different browsers behave similar. But it looks like not everything is included there.
Has anyone an idea what could cause this?
Add display: inline-block; to your .tags li a
This won't affect the well-behaving browsers, but will fix FF
Related
I have a ul with lis inside that I'm using as a tab list. The lis have an image and some text inside of them. For some reason, in chrome, the text doesn't appear on the same line as the image, but wraps to the next line.
I can't understand why this would happen, shouldn't the li expand to give enough space to fit both the image and the text? This problem doesn't happen on Firefox or IE. Testing with Chrome 22, Firefox 16 and IE 9 on Windows 7.
See this fiddle to see the markup (extracted from a longer page - also not the real icons).
It sounds similar to this problem, but the nowrap trick didn't work for me.
Update: I just realized I had a different zoom level set, 144%. At some zoom levels the issue happens, and others it does not. I guess it might have something to do with the ems for some sizes, and px for others? I still don't get why this would happen though, shouldn't it still get the proper amount of room?
Set a minimum width on the header. You also have the issue if you reduce the browser size. Figure out how small it can go before it starts to stack and set the min-width on the header to that size, that fixes it if the browser is zoomed too.
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page -
http://www.designlagoon.com/what-we-do/
There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix.
If anyone can shed some light on what might be causing the problem I'd really appreciate it!
This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?
Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.
Firefox does a miscalculation when adding padding to td.
So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.
Thanks for the advice. I tried removing padding from the table and td and applying it to the paragraph instead. This improved the problem to an extent but we were still left with different borders in firefox, IE and chrome.
In the end we decided to remove the table completely and use 4 floated 25% columns instead. I will avoid using tables for any site layout in future. Lesson learned!
I'm currently developing my site with a new layout and stuff, and after hours of fiddling around in Chromiums inspector, can't seem to pinpoint why the the content tabs won't fully stretch like in Firefox or IE9. There seems to be a small gap on the right side.
I'm still in the process of tidying the whole css so there are less conflicts, but whatever I do the tabs won't fully stretch in webkit.
Here's a testing page I've set up with the jquery tabs
http://bad-good.org/index.php/Troll_2
Any ideas or workarounds? Looking forward to learning something. Cheers
You've set the ul to width:100% which renders to 975px.
The li are set to width:25% which in theory should be 243,75px... Chrome makes a floor approximation for the decimals (truncates them, so 243,75 is 243), like mentioned here.
I'd recommend changing the site's width (for example 960px) or working with fixed widths in opposition to percentages.
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.