UPDATE [4th May, 2015] : It seems the latest versions of Chrome (42.*) have fixed it.
It looks like an embarrassingly simple problem, but I don't know the solution to it. One of the smallest samples which reproduces this is the following HTML code:
<html><body><input type="button" value="button1"/><input type="text"><input type="button" value="button2"/></body></html>
Please note that there is no newline or a whitespace character used anywhere in the above (except to separate the attributes)
In Firefox, it looks like this:
But like this in Chrome:
Notice the extra whitespace Chrome decides to add by itself. I've tried everything I could, but haven't been able to remove this as I need no space between these elements (or may be a minimalistic value just like FF has).
Any help on how can we do that?
Thanks ...
One option would be to reset the styles in your CSS.
You can add this to your default style sheet.
* {
padding: 0;
margin: 0;
}
If you need a little more information on resets there is a good run down here : http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/
Try resetting your CSS, http://www.cssreset.com/.
Some DOM elements have browser specific layout values if you don't reset them.
I've noticed adding a new line in the source often adds whitespace to select tags. This is VERY bothersome if you like readable source. Sure, you don't need a new line in the source, but it shouldn't be this way. It's a bug in Chrome.
Related
I am working on a Wordpress website in which I need to use the musical "flat" symbol. To figure out what might be a good way to handle this, I checked out what is used on Wikipedia, in the corresponding article (https://en.wikipedia.org/wiki/Flat_(music)).
I know how to find the HTML entity code and use that, and I know I can just copy the symbol from somewhere else and just paste it directly into my post. But when doing that, there is extra padding around the symbol, so it displays incorrectly, like this: D ♭ . (It's actually not doing it here on SO, so I had to add spaces on each side to simulate it.) It looks like the problem is handled on Wikipedia by the following code, which appears everywhere the flat symbol is used:
<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span>
So I used the same code and I created a "music-symbol" class in the CSS file, in which I set padding to 0. I couldn't find the corresponding class on Wikipedia, but I guessed that that's what it contained. I honestly don't know why this works (I'm a noob) but it does seem to work, assuming I specify the font using the style tag as shown. When I say "it works", I mean that it makes the flat symbol appear right next to the note name, as it should, without extra space, like this: D♭.
However, when I view the same site on my Android, the spacing is still there. Can anyone explain why, and how I should address this?
Also, is there a better or more straightforward way of handling special symbols like the flat? I don't get why I was able to paste it in directly here on SO and have the spacing be correct without having to use the extra class reference and style tag.
As far as I can see within the styles on that particular site there is no additional styling for the music-symbol class. From what I can tell the additional white space is inherit to the element and font(s) being used. Padding will not be what you are looking to alter, you would be wanting to adjust the margin of the span element where the symbol is placed.
See class definition below for styling a span with the music-symbol class
span.music-symbol {
margin-left: -2px;
}
JS Fiddle Link http://jsfiddle.net/Xfvpu/1/
Okay so I have a document with xhtml doctype and I use the proper br / tag
but for some reason the gap between two images renders differently in Firefox than it does every other browser.
The page is can be found at http://www.safaviehhome.com/Rugs/Area-Rugs.html
the CSS is all mixed up unfortunately so I can't explicitly post it, but the two images are within a DIV wrapper, and the images themselves are not in seperate divs. They both have image maps, and the size between the two images width only differ by around 20px.
In between the two images are two br /
tags, I tried fiddling around in Firebug but could not figure it out .. And I won't be happy until I figure this out .. it's pissing me off! :)
The difference between other browsers and Firefox is around a 10px difference .. Firefox adds extra spacing .. I'm not asking for any help specifically, just wanted to see if there is some rendering issues I'm not aware of so I can put this issue to rest.
Look in other browsers vs Firefox to see what I mean .. I would really appreciate some help I need to figure this out for my own knowledge.
You cannot rely on using <br/> for vertical spacing. You need to use styles, such as
<div style="margin-top:5px">image goes here</div>
Or even:
<img style="margin-top:5px" src="yourimg.jpg" />
In my experience browsers are sufficiently consistent if you use this approach.
Edited to add:
But (and I can't stress this strongly enough): browsers will never be entirely consistent. Designs which assume that 100% consistency is possible will fail. (If this seems harsh, try getting through one day using only your smartphone's browser. Yuck.)
While I do not know the exact reason why Firefox acts like it does, I can offer an advice. From my experience using br tags for layout are, er, not the wisest idea, since you easily lose control of the exact spacing it creates. Like in this case, where it seems that Firefox intreprets two br tags as two lines, whereas at least Opera take the first one as a line break after the map and the second one creates this empty space.
You didn't ask for a workaround, but I can't resist: take a look at br-less alternative.
I am writing a very simple HTML code which is listed below. Written in notepad and opening in IE-8 and Firefox (OS: Window Vista).
<html>
<body>
<table border="1"><tr><td>test</td></tr></table>
</body>
</html>
There is nothing special in the above code, It is creating some space from top left corner.
Which can be easily removed by using the following code
<body style="margin:0; padding:0">
Now i have find out the default margin and padding, which is 4 for Firefox and different for IE-8.
<body style="margin:4; padding:4">
I have some question on this scenario.
Why this value is 4?
From where this value is coming, is it saved somewhere?
Can we modify (configurable) this default value?
How these values are different for browsers?
Thanks.
First of all, it's probably 4px and not 4. Second, that's just the way the browser vendor decided should be the default.
It is saved in the default browser stylesheets.
You can, but you shouldn't. It differs with each browser. Google it! How do I change default stylesheet on <insert browser here>?
There probably are slight differences, you should be able to tell... by looking at the default stylesheets :)
That difference is one of the main reasons we as designers use a CSS reset, to normalize all of the CSS awkwardness that follows different browser implementations.
Browsers have built-in "sane defaults" for the CSS of most HTML elements - this just prevents your page looking completely unreadable if you have pure HTML without CSS, but they are of course intended to be overridden by your own CSS.
The default browser styles are typically referred to as a "User Agent Style Sheet" - the following site is a good reference of the various peculiar UA sheets IE has had over the years and also provides ones for other browsers at the bottom:
http://www.iecss.com/
One method a lot of people use to "normalise" the defaults so you have the same starting point in all browsers is a "CSS Reset" - this is just a snippet of CSS that you place before your own CSS that sets all of the UA styles to the same thing. This is a well known one:
http://necolas.github.com/normalize.css/
Try this
body{
line-height: 0
}
Add this on top of your stylesheet
*{margin:0px;padding:0px;}
This eliminated all differences in padding and margin across browsers.
I have a named anchor tag:
<table id="search_results" name="search_results">
I am linking to this like so:
pagename.php#search_results
This is working in Firefox and chrome, but not IE (8).
I have tried using an <a> tag as suggested in some other posts. I have also tried to give the search results table the css:
display: inline-block
as suggested by one of the commenters on this article. My table always has content as well, which the article suggests can be the reason for IE rejecting it.
I'd be grateful for any suggestions.
Many thanks
That's how I was motivated to search for a different solution:
Added text was inappropriate for the display and the non-breaking space caused an extra line space to appear between the paragraphs. This could have been corrected, but the multi-MB pages would have required a lot of manual work.
The pages, developed with iPage, can be viewed here: www.theUB.org
I've been told by several professionals that such long pages are usually avoided in web site design, but these pages (with many named anchors and a "point & click" Table of Contents) seem to work well for this 2000-page public domain text.
One more disadvantage of the non-breaking space solution:
This online text needed to be read correctly by computer screen readers. Some people have commented on other blogs that screen readers voice the non-breaking space (or added text).
(Note the added decimal point after the paragraph numbers - this was necessary to prevent screen readers from voicing the merged paragraph number and first word of paragraph.)
Couple things:
IE8 does not support inline-block ;)
When you tried the a anchor, which is probably best, was your code something like
<a name="search_results"></a>
<table name="search_results" id="search_results">
</table>
The <a name=""> method is pretty much universally supported.
Firstly, using named anchors to navigate the page does what it says. You have you use a named anchor (<a> tag) to do it. Some browsers support it on non-anchors, but this is not universal and should not be relied upon - as you have discovered.
Secondly, are you sure you page is long enough? If the thing you are trying to link to is right at the bottom of the page, it won't display at the top of the viewport as you might expect, since there is nothing below it to display at the bottom of the page.
Thirdly, check that you did the named anchor correctly. You should be doing something like this:
<a name="search_results"></a>
<table name="search_results">
...
Regarding named anchors that do not require text:
Others have suggested this "workaround" for IE8: insert a "non-breaking space" character if no text is required ( ).
However, I also discovered that resetting my IE8's View/Zoom from 125% to 100% also activated the anchors that were not corrected with the "non-breaking space" solution. IE8's View/Text Size is not part of this problem.
Note: Large, text only, HTML pages were being tested: (font face="Verdana" size="+1"). These HTML pages displayed correctly in Firefox 15.01 without regard to View/Zoom,Text Size settings.
I've got this working by adding some text inside the anchor, like:
<a name="search_results"> </a>
This appears to be another solution to the IE large file load delay: create a smaller HTML file which links via HREF to the large file (or to a bookmark (named anchor) in that file).
This test has been tried multiple times with the IE direct load of the large file always causing a long delay, but not when the user clicks the link in the small file to go to the large file.
Perhaps, IE is analyzing the primary file to see if it had already been loaded into the cache.
Note: This HTML file being tested is 11 MB (an entire book with many bookmarks and links to those bookmarks from other parts of this very long HTML page).
I faced the same problem on IE, Edge and chrome,
and I think the problem is because the encoding and decoding on the name attribute
so I did a workaround solution, take a look
anchorElem.on("click",function() {
var href = $(this).attr('href');
var scrollEle = $(".tocContent").find('a[name="' + href.substr(1) + '"]' + ', a[name="' + decodeURIComponent(href).substr(1) + '"]');
if (scrollEle.length > 0) {
$('html, body').animate({
scrollTop: scrollEle.offset().top
}, 0);
return false;
}
})
hope this help you
and happy solving browser compatibility issues
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.