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" />
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 have a dropdown menu in css, it works fine in Chrome, FireFox, but not IE8, i haven't checked it in IE6/7. but it seems hopeless.
my site at HERE.
The dropdown menu is the black one.
i think the problem is with the :hover, try searching around something like #button .a:hover, etc... but get no luck.
I hope you can help. the css file is HERE
Thank you sirs
The problem is that you have not included a doctype on your website.
Because you haven't included a doctype, your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
Add these two lines to the very top of your file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
If you add in that magical doctype line, your drop down works in IE8 and IE7.
You should move this part of your code to within your <body> tag.
<span style="float:right;margin-top:10px;">
</img>
</img>      
</span>
Also, you can change it to something like this:
<div style="position:absolute; top:10px; right: 10px">
<img src="img/vn.gif"></img>
<img src="img/us.gif"></img>
</div>
When this sort of thing happens - go to Tools --> Compatibility Mode ; and make sure it's off. I have had similar issue and switching that off made my menu work properly (where it wasn't working at all).
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?
I am getting a really strange behaviour when viewing a very simple piece of HTML in IE, served up by IIS. I am at a loss to explain this...
Take the following html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.iWantaBorder
{
border:red solid 1px ;
}
</style>
</head>
<body>
<select class="iWantaBorder">
<option>1</option>
</select>
</body>
</html>
Save as html file to your desktop.
When viewed in IE8, the select menu has a red border.
Now copy the file to a website or virtual directory in IIS 5.1 or IIS6.
Browse to that file in IE8... no red border.
Can anyone tell me what is going on here? I really want a border on this menu. Thought this should be simple to be honest, but I'm pretty much confused!
try putting this in your HEAD tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
as per: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
This might fix the issue:
<style type="text/css">
.iWantaBorder
{
border:solid 1px red;
display:inline-block; /*this should fix the bottom and right border*/
}
</style>
EDIT:
I have tried replicating the issue, you are right it doesn't work on IE8 but
if you are on IE8 Standards/Compatibility mode it works on IE7 Standards/QuirksMode it does not, don't know why it's not working on IE7 Standards/Quirksmode.
Anyway another workaround is to wrap the select element with another inline element and put the border on wrapper element.
<span class="iWantBorder">
<select>
<option>Sample Option</option>
</select>
</span>
Try this:
border: 1px solid red;
The border shorthand syntax should be weight, style, colour. You appear to have this in the wrong order.
Putting these in the wrong order might put IE8 into quirks mode, possibly causing your problem.
As it was form controls the border won't display in IE8, if you want develop custom select box to display in all browser consistently.
Quirks mode is nothing but document type declaration, if you use strict.dtd in the document type deceleration it will always render in standards mode.
Form controls (Radio button, check box, select box and dropdown) always renders depending on the operating system and browsers unless you develop custom controls.