I have this CSS code:
html {
overflow-y: scroll;
}
body {
background-color: #e4e4e4;
font-size: 12px;
font-family: Verdana, 'Lucida Grande', Arial, Sans-Serif;
line-height: 1.6;
color: #555;
}
#wrapper {
width:950px;
position: relative;
margin: 20px auto;
background-color: #fff;
border: 1px solid #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
In Chrome it works perfectly, the wrapper is in the middle of any screen resolution and has curve border.
But very big trouble when it comes to IE9, the wrapper sticks to the left, the border doesn't show and other stuff.
See this post regarding rounded corners and IE 9 - IE9 border-radius
PS - Went to go troubleshoot this in IE9 on my VM and jsfiddle doesn't work in IE9 lol.
Think you need this
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
paste it between the <head></head> tags
Did you specify a correct doctype? This is just guesswork since you didn't share any HTML code.
Related
I uploaded a responsive site I did for a friend that does not render full width on the Index Page whether viewed on a smartphone or tablet.
The lady is doing me a favor as I try to get my name and work known. She has a business she'd like to see grow and we thought the Internet the place to start.
The odd thing is that site's other pages render just fine with proper width and height.
This leads me to believe the problem is with the "#media screen" queries.
I believed the CSS "width" and other properites and values in the full width, non-mobile page's code, would "cascade" down into the smaller mobile queries but added the properties "head," "html, body" and "footer" sections to see if that would improve the situation.
It did not.
The site can be viewed here: www.notaryonwheelsshaver.com
The CSS can be read here: http://www.notaryonwheelsshaver.com/css/nows.css
Any help would be greatly appreciated.
Your first media query (780px) has a typo in html,body -> height: 100%x; That may be interfering with the min-width attribute under it.
I don't know if that will fix it, but it's what I noticed.
I think the issue is in your CSS file:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
/*width: 100%;*/
}
/*width: 100%;*/ is commented out which makes the browser skip the code try changing it to:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
EDIT: You have the width also commented in:
.wrapper {
/*min-width: 100%;*/
min-height: 100%;
}
Im creating a simple webpage. My CSS is only working in Chrome. It doesnt work in both Firefox and IE11.
Here's my HTML
<html>
<head>
<title>text</title>
<link href="css/stylesheet.css" type="css/stylesheet" rel="stylesheet" media="all"/>
</head>
<body>
<h1><b><u>Adding a new Visitor</u></b></h1><br/></br>
<div class="wrapper">
<figure>
<img src="images/advis1.png"/>
<figcaption style="padding-top: 12px;">text</figcaption>
</figure>
<hr/>
<figure>
<img src="images/advis2.png"/>
<figcaption style="padding-top: 12px;">text</figcaption>
</figure>
<hr/>
<figure>
<img src="images/advis3.png"/>
<figcaption style="padding-top: 12px;">text.</figcaption>
</figure>
<hr/>
<h3><u>Result</u></h3>
<img src="images/advis4.png"/>
<br/>
<img src="images/advis5.png"/>
</div>
<footer>
Author: Malcolm Tanti | Contact information: xxxxm
</footer>
</body>
And here is my CSS
h1 {
text-align: center;
border-bottom: double;
border-left: double;
border-right: double;
width: 75%;
margin: 0 auto;
padding-top: 25px;
padding-bottom: 25px;
background-color: #C4CEDD;
box-shadow: inset 0 20px 20px -20px #000000;
}
body {
padding:0px;
margin:0px;
border:none;
background-color: #7ea2d6;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
.wrapper {
box-shadow: inset 0 20px 20px -20px #000000;
border: double;
padding-top: 50px;
padding-bottom:50px;
width: 75%;
margin: 0 auto;
text-align: center;
font-size: 20px;
background-color: #C4CEDD;
}
img {
border:3px double;
display: block;
margin: 0 auto;
}
footer {
padding-top: 10px;
text-align: center;
font-size: 14px;
}
I am quite new to CSS but and HTML. It works prefectly fine in Chrome which leads me to wonder what the problem is. My Problem is that none of the css loads and that all images and text are not aligned. I do not even have anycolours
I tested your code and found that if you remove type="css/stylesheet" from:
<link href="css/stylesheet.css" type="css/stylesheet" rel="stylesheet" media="all"/>
so it looks like:
<link href="css/stylesheet.css" rel="stylesheet" media="all">
You also don't need the closing / at the end.
It fixes the issue. (Tested on standards mode not quirks)
And you shouldn't need to do this:
<h1><b><u>Adding a new Visitor</u></b></h1><br/></br>
The underline, font-weight and spacing (margin/padding) should be done in your CSS:
<h1>Adding a new Visitor</h1>
h1 {
text-align: center;
border-bottom: double;
border-left: double;
border-right: double;
width: 75%;
margin: 0 auto;
padding-top: 25px;
padding-bottom: 25px;
background-color: #C4CEDD;
box-shadow: inset 0 20px 20px -20px #000000;
text-decoration: underline;
font-weight: bold;
}
Hope that helps.
Solved by using type="text/css" instead of type="css/stylesheet" when importing the stylesheet.
for internet explorer add this
<!--[if lt IE 9]
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < /script>
<![endif]-->
It can be because of browser cache. Please clear browser cache by CTRL + F5
I had the same problem and none of the above fixed my issue. In my case, in the end, the solution was simple:
Somehow IE doesn't load the CSS if you are running the page locally (as in stand-alone in your browser). I uploaded the exact same script to a webserver and it works like a charm!
msvk_23 is right.
I had a local html page, instead of post-it.
After I have installed Notepad++ it was all messed up in Internet Explorer and Edge, but not in Google Chrome.
When checking registry it said: text/xml
After changing this to text/css as suggested, it worked immediately in both Internet Explorer and Edge.
Thanks msvk_23 :)
pic of regedit
Try this option:
Please run regedit.exe and navigate to the key HKEY_LOCAL_MACHINE\SOFTWARE\Classes.css
Modify: "Content Type" from "text/plain" to "text/css"
For me the css was not at all recognizing in IE 11. By changing this entry in regedit. It perfectly worked in my PC.
Hello I am just getting started with HTML and CSS but having a weird issue.
If I use border:0; and padding:0; I still get a white space all the way around my div. I can fix the issue by doing margin:-8; but that doesn't seem right to me. I am using Dreamweaver if that matters. thanks!
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar">Home - Introduction - Stakeholders - Implementation Plan - Proposal - Training</div>
</body>
</html>
and the CSS:
#charset "utf-8";
#navbar {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
font-weight: bold;
text-decoration: none;
background-color: #CCC;
height: 25px;
text-align: center;
border: 1px solid #000;
margin: 0px;
}
I figured it out thanks!
Adding a body tag in my CSS and setting the margins to auto fixed this.
So I originally created my webpage all in one php file, and all the css styling worked as intended. However, now that I've gone ahead to try to split up the code by putting all the css in its own file, my php page is does not include any of the styling from the css page. I'm sure i've made a simple error, but I can't seem to figure out what I've done wrong. The the link to my folder is Computer --> MWebsite --> Login --> login_template.php and css folder ( --> design.css ).
Here's the top of the php page...
login_template.php
<html>
<head>
<title>CarPals</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="design.css">
</head>
<body>
and here's the top of the css page just to show how I have it laid out...
design.css
h1 {text-align: center; color: #bdd0d9 }
a {color: #f75d59; text-decoration: underline; }
yy2 {color: #808080; font-family: "Comic Sans MS", cursive, sans-serif; font-size:12px;}
yy3 {color: #6D9BC6; font-size: 30px; font-family: "palatino linotype", Book Antiqua, Palatino, serif; font-weight:bold;}
body {width:100%; background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #4D4D4D))}
.dotted {margin:-7px; border: 1px dotted #808080; border-style: none none solid; color: #000; background-color: #F2F2F2; }
#outline {background:#696969; position: absolute; top: 0px; margin: -10px; width:1287; height:80px;}
#outline-text {position:absolute; top:-12px; left:200px; width:300px;}
#break {height:15px}
#break2 {height:10px}
#break3 {height:15px}
#frm {
background: #6e6e6e;
margin:auto;
top:320px; left:857px; width:243px; height:230px;
position:absolute;
font-family: "Comic Sans MS", cursive, sans-serif; font-size: 7px; font-style: italic;
line-height: 24px;
font-weight: bold;
color: #C0C0C0;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.7);
}
It looks to me that you are just missing the type attribute for the link tag. Try with type="text/css" and see how that goes.
Also, you may want to add the media attribute as well which will help define what type of media this CSS document is for. Here is some information regarding the media attribute
EDIT
Here how Stack Overflow's CSS is included (exact HTML at time of edit):
<link rel="stylesheet" type="text/css" href="http://cdn.sstatic.net/stackoverflow/all.css?v=0f0c93534e2b">
EDIT
Further checks that would be worthwhile include doing CSS Validation and if fixing any issues with that doesn't solve your problem, it may be actually accessing the CSS file.
Check that the page you visit in the browser is relative to your CSS document. If the page you are physically accessing in the URL (ie. http://youwebsitehere.com/youPage.php) is not relative to the CSS (as your CSS href is relative - "css/design.css") so you would want to be able to access your CSS via http://youwebsitehere.com/css/design.css
In the style for the body tag you're missing a closing parentheses at the end of the line, that might make the rest of the code invalid.
right after color-stop, the inner nested parentheses.
I have the following CSS:
#main2 {
width: 680px;
margin: 0 auto;
padding: 0;
}
#header2 {
text-align: center;
margin: 0 auto;
padding: 0;
height: 31px;
line-height: 31px;
}
#contents2 {
text-align: center;
margin: 0 auto;
border: 3px solid #0F446D;
padding: 0;
padding-left: 15px;
height: 365px;
background: url('theImages/certBG.png') no-repeat bottom;
}
#store {
background-image: url('theImages/certHeader.png');
width: 231px;
height: 31px;
padding: 0;
margin: 0 auto;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial;
font-size: 14px;
}
But this page: Non Working Page
shows the header "Your Information" differently than this page: Working Page
Can anyone please let me know why? and how to make the first page show the header correctly.
You require a different CSS style-sheet for internet explorer(IE):
Refer line 8,9 and 10 of following page source(by clicking ViewSource in IE) .
<!--[if IE]>
<link href="theScriptsStyles/mainStyle-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Page Link-1 includes IE Style-Sheet while Page Link-2 do not.
Both page looks identical in other browsers(Chrome, Firefox).Looks different in Internet Explore because of mainStyle-ie.css
IE always has CSS issue. Therefore,you have to target specifically your style-sheet for IE only. You will need to put condition code(like above) on heading section of the page.
#store22{ display:block;}
OR
Add display:block; on line 22
and it works excellent as your demands. :)