Can somebody explain why I see a vertical scrollbar in Chrome and IE9 with the following markup:
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen SVG</title>
<style>
html,body {
margin: 0px; padding: 0px;
width: 100%; height: 100%;
}
.fullscreen {
width: 100%; height: 100%;
}
</style>
</head>
<body>
<svg class="fullscreen"></svg>
</body>
</html>
If I replace the svg with a div it works perfectly. But if I put the svg inside that div, the layout is broken again:
<div class="fullscreen">
<svg></svg>
</div>
Changing the doctype to XHTML seems to fix the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But inline SVG is a part of HTML5 so...
In the meantime I also filed a bug report.
I'm a little late here, but I stumbled across this when I was trying to solve a different problem.
I don't think what you're experiencing is a bug. The SVG tag is an inline element by default (for the record, IMG tags are too) and DIVs are considered block elements. I'm thrown off a little here because you aren't supposed to be able to set height/width to inline objects (If you tried to do this on a SPAN, the height/width is ignored).
You might consider this another workaround, but explicitly setting the display property to block removes the scrollbar. Floating the SVG element would also fix this.
.fullscreen { display: block }
It appears that the HTML5 DOCTYPE is based off of the W3C's strict DOCTYPES (not the transitional). Both strict declarations also display the scroll bar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So at this point, it might be best to refer to a different discussion if you care about strict vs transitional DOCTYPES: Browser Rendering Difference Between strict/transitional DOCTYPEs
Hopefully this adds a little value to value to the discussion.
To build on Corey's answer, inline or inline-block elements are called "inline" because they are intended to be laid out amongst lines of text. So, wherever they appear, space is reserved for the "descent", which is the area underneath a line of text where the dangly parts of lowercase g's, j's, and y's go.
So that's where the extra space comes from when your svg element has display: inline. You can manipulate the amount of space reserved with the line-height property, or you can remove it altogether by setting display: block, as Corey noted.
I believe you're able to set the height and width on img and svg elements because they are, in CSS parlance, "replaced" elements, and behave a little differently than regular inline elements. The CSS spec explains how this works in more detail. And as far as specs go, it's actually pretty readable.
The easiest solution would be to just add the CSS rule overflow:hidden to the html and/or the body tag.
html, body { overflow:hidden; }
Edit
Another solution would involve using the XHTML doctype. This works in Chrome, and I suspect it works in IE9.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Possibly try resetting the margin and padding on the svg tag, like you've done with html and body. Could be some default styles on the svg.
Sounds like a CSS question to me, have you checked these answers already?
Related
I'm trying this html code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body { background-color : green !important; background-color : red; }
</style>
</head>
<body>
Hello World !
</body>
</html>
In firefox, it's working fine : green background.
In internet explorer : it's not working : also green background.
If I remove the doctype, it's working fine in both.
I tried different doctypes but always the same problem.
What can I do ?
Ok I know this example is stupid but much more easy the explain the problem. The question is : why css hack seems not working with doctype definition ?
There is no hack there. There's a !important declaration, which is standard CSS, but wasn't supported properly by IE5.
If you take away the doctype, IE will go into quirks mode, which is basically an IE5-emulation mode. Therefore it will use the IE5 CSS rules, which means that !important doesn't work (along with a whole bunch of other features).
So without a doctype, in quirks mode, it ignores !important, and so both your rules have the same precedence, and thus the second one (red) is used.
With a doctype, the browser will be in standards mode, and !important works the way it should do, which means that green takes precedence because it's 'important'.
I still don't get what you're trying to achieve, but hopefully that explains to you what is going on.
My website http://www.matejkadesign.com is having trouble displaying consistently styled outer table borders across Chrome, IE, and Firefox. The styling I want is in Chrome, but is different both in the other two browsers. I've looked for fixes but find none. I don't style my tables in CSS, I do it in html like this:
<table align="center" cellspacing="5" cellpadding="5" border="4" bordercolor="#3c2610" width="310px" >
This appears to produce three different effects. How can I make the styling the same across Firefox and IE as in Chrome?
Is there any particular reason why you need to use inline styling?
You can fix those behaviors by defining exact border style for both table as well as td tags, by doing this you prevent browser from applying its own styling.
Try this:
table {
border: 4px solid #3C2610;
}
td {
border: 1px solid #3C2610;
}
You have an HTML <!--Comment--> before your doctype which will trigger IE to go into quirks mode (equivalent to IE5). IE basically parses your document as if it had no doctype. Nothing should precede <!DOCTYPE html>
Secondly you're using deprecated table attributes from HTML 4.01 yet you have technically declared an HTML 5 doctype .. these two reasons most likely explain the discrepancy amongst browsers.
You're also using the deprecated align attribute several times throughout your site .. if you insist on using HTML 4.01 attributes at least change your doctype to match it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I'm having some trouble with IE not reading all of my CSS on the homepage of a website that I'm editing. I've checked to see that it validates (it's still showing that some tags aren't closed even though that's not true but whatever). I CANNOT get rid of the inline styles specifically because the content management system (Volusion) overwrites much of the code that I write, so I've been forced to write a lot of inline code. The CSS page is loaded so that the header region has the styles:
#header{ z-index:1;
width:100%;
opacity:.85;
background:rgba(200,200,200,.85);
/*For IE*/
background-color: rgb(200, 200, 200);
opacity(0.85); }
I originally ran it without "background-color" because rgba(200,200,200,.85) should work with IE but in this case it isn't. In fact, even before I changed it to add 'background-color' the other pages were drawing from this CSS perfectly. The home page however reads background-color, but that's the only thing it takes from this. It is clearly reading from the Template.CSS file because it references it, however the opacity is not being used and the header is being placed after images which are 'fixed' and so should be hovering above those images. The same is happening to the other elements within the header. I have btn-group:first-child as having:
.btn-group a:first-child{
border-radius: 4px 0 0 4px;
text-decoration:none;
font-weight:bold; }
but none of these styles are applied on the home page. In fact .btn-group doesn't show up at all on the styles list. I know that it can read this because if you go to any other page of the website you'll see how it should look (it's nearly perfect). The homepage however doesn't work.
The page in question is found at www.giftonline.us , any help at all would be appreciated!
IE is being forced into Quirks mode, because you have an invalid doctype that doesn't match the other pages. You need to use a valid doctype so that IE will display in Standards mode.
Currently you have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Try changing the doctype of the homepage to be the same as your other pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Once you have given the page the correct doctype, the CSS rules should work like they do on the rest of the pages.
And you are using invalid html to link to your CSS:
<link href="v/vspfiles/templates/tempTemplate/css/Imports.css" rel="stylesheet" type="text/css"></link>
It should be changed to:
<link href="v/vspfiles/templates/tempTemplate/css/Imports.css" rel="stylesheet" type="text/css" />
Is there a solid solution for implementing position: fixed that will be supported in all major browsers?
I was so proud of my recent code, that solved all my issues in FF, until I looked at it in IE. There seem to be a lot of hacks around but some of them seem to contradict each other...
I need to position several elements on a page relative to the window.
This code works great in FF, but not in IE, even v.9. The element is supposed to be fixed in the top-left corner even when I scroll the page. In IE it scrolls up with the page content.
#myElement{
left:0;
top:0;
position:fixed;
height:35px;
width:290px;
background-color: #f5f5f5;
z-index: 999
}
Thanks for your help.
As I suspected, you are using an invalid DOCTYPE which is sending IE into quirks mode. To keep IE in standards mode you need to make sure you use a valid DOCTYPE. So, if you want to use HTML 4.01 transitional it should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
However, I would use the shorter and simpler HTML5 DOCTYPE:
<!DOCTYPE html>
Only IE6 does not support position:fixed, and it's not major browser. (See browser support here.)
Try using position:relative; or position:absolute; instead of position:fixed;
These are there in IE9.
However, many a times position property gives undesirable result, thus, I always prefer to avoid it as much as I can. Do check with Chrome/Webkit also.
If anyone still has this problem.
Enter the following into your style sheet. All browsers will override position:absolute with position:fixed and you'll get what you want. IE 6 does not understand the > operator, so it never sees position:fixed and uses position:absolute. The web page is usable in all browsers, but not as pretty in IE6.
htmltag
{position: absolute;}
body>htmltag
{position:fixed;}
I have read the answers posted for this issue and tried them all, but still have the gap. See link to the site I am working on http://www.poolboy.ca/. It's the gap between the top of the pool and the menu bar. Please help!
There's a really easy fix here.
Your doctype (first line) is currently this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
That doctype triggers Quirks Mode in IE.
If you change your doctype to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IE will be in Standards Mode instead, and your gap will magically disappear.
You could instead just use the HTML5 doctype, which is much shorter:
<!DOCTYPE html>
add to your css i cant promise anything but this will set all boxes to have 0px margin padding and border by default this is something i can not fathom about ie but it normally fixes it
* {
padding: 0px;
margin: 0px;
border: 0px;
}