My website is left-aligned in IE 8 and 9 when it should be centered like it is in Chrome and Firefox. I have tried standard solutions like the one below with no luck. There are multiple style sheets on the page -- perhaps there's a conflict? Any help would be appreciated...
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
Although you define the following CSS in your style.css stylesheet-
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
position:relative;
}
There is no corresponding element with an ID of wrapper on the page, your #header, #nav, anonymous content and #footer divs are all direct children of the document body.
The link as a child of the h1 with ID "logo" almost certainly needs to have a left value (probably of zero) added in addition to the existing "top" value as it is overlapping your phone number.
You also appear to be encoding the conditional comments added as the first child of body in IE8 as -
<!--[if lt IE 8]--> <!--[endif]-->
Is appearing in the page.
Have you tried using either Chrome Developer Tools or Firebug (for Firefox) to inspect your code?
Related
Creating a very simple webpage for DIV testing. I have a DIV that creates a header at the top of my page, which is fixed so it does not scroll off the page. Within this DIV, I have an H1 header that I want to be centered vertically, left justified but away from the left edge of the page by a certain amount (20 pixels).
Here is my code:
CSS:
body {
font-family:"Calibri";
margin:0px;
}
div.header {
top:0px;
left:0px;
width:100%;
height:50px;
position:fixed;
background-color:#7fc7f4;
border-bottom:thick double black;
z-index:2;
}
h1 {
color:black;
margin-left:20px;
font-variant:small-caps;
}
HTML
<!Doctype html>
<html>
<body>
<div class="header">
<h1>Website Heading</h1>
</div>
</body>
</html>
When it renders on my C:\ drive, the H1 text is at the bottom of my DIV block. I copy the files to a network drive, and open it from there. When it renders from the network drive using the same browser on my computer (IE9), it is centered all on its own.
For my C:\ drive, I tried adding the following to my H1 in the CSS:
h1 {
color:black;
line-height:50px;
vertical-align:middle;
margin-left:20px;
font-variant:small-caps;
}
This has absolutely no effect when rendered on my C:\ drive. Rendered on the network, it is still centered as I want it, just as it was before I added these lines which appear to be ignored. I obviously want this to be consistent in both the C:\ drive and network locations, so I know that my pages are working properly when both building/testing and deploying for all to consume. It also has to be consistent across Chrome and Firefox as well.
Thoughts anyone?
One thing I'm not sure about is where to add these lines of code. Do I add them to the H1 tag as I have done, or do I add them to the DIV tag? Does it matter? I have tried both, and it doesn't seem to make a difference.
You'll have to forgive me, as I am relatively new to CSS, and am trying to get a better understanding. I have searched through the answers on similar topics on here, and all the suggestions that people have given don't seem to work. So I am hoping that I am just missing something simple.
Ensure you 0 out the other H1 margin values:
h1 {
color:black;
margin:0 0 0 20px;
font-variant:small-caps;
}
You should be implementing a normalize CSS file to baseline your HTML elements if you aren't already.
For example, I use http://html5boilerplate.com/
What you're looking for is 'line-height' on the H1 element, the following makes the line-height of the h1 element the same height as the containing div, giving it the effect of vertically aligning in the middle.
You'll also need to remove the margins that are on the h1 element by default, by using margin:0;
h1 { line-height:50px; margin:0; }
See here: http://jsfiddle.net/2RtkT/1/
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
I often look at code and see stuff like "-moz such and such CSS rules, -webkit such and such CSS rules" and think I need to do something like that in my case.
My page http://scope-stage.scholastic.com/ needs to appear as it does in firefox, but when I look at it in Chrome and Safari, it's completely backwards. In Firefox I could not get the margins how I wanted them to be with regular margins, that is - I had to use negative integers for the margins. What can I do to have the margins be the same in all browsers?
Here's my CSS on just one of the divs (I think I can apply any answer to the rest)
.colorScheme {background-color:#B9E9DA; width:500px; height: 340px; margin-top:-45px; padding:0;}
but you will clearly see the brokenness of it when you look at it in any browser other than FF.
Thanks for looking and helping.
I'm not 100% sure on this you will have to test but I believe you can solve your problem as follows.
* {
margin:0;
padding:0;
}
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin-top:-45px;
padding:0;
}
This will set all elements to have no padding or margin. Giving you control using CSS for all paddings and margins.
Alternatively you can just assign hardcoded to the single class but you will need to assign a value to EACH margin/Padding as follows
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin:-45px 0 0 0;
padding:0;
}
Try those and see if they work out for you.
I have just got a developer to redesign my website and I have noticed one thing.
In Google Chrome my web page has a nice margin around it, about 2". But on IE the page goes right up to the edge of the page and makes the page look super big.
I want them both to have a margin around the page.
The web page I am talking about is, web design quotes.
Is the code I need to change in the CSS?
Any help is appreciated.
This link will show you how to make 'responsive web designs' so it fits all resolutions.
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can try this. it helps you when it does not work in IE
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
in your body you give the margin and in your content you do an margin auto.
as explained here: http://bluerobot.com/web/css/center1.html
I am using asp:button for my asp.net project.
I wrote one css Class. It perfectly apply Css style and show image in the asp:button.
It is working fine in FF, Safari and IE8.
But the Css Class does not work in IE7, How to solve? and my Code is:
.likeImage {
background-image:url('images/LikeNew.png');
background-repeat:no-repeat;
background-position:top left;
width:65px;
height:24px;
cursor:default;
text-align:left;
padding-left:5px;
margin:0px;
padding:0px;
}
try this :
padding: 0 0 0 5px;
You used (padding-left:5px;) and (padding:0) this is not the right way.
just use
padding:5px;
Then please check.
Add border:0; in your CSS for asp:button.
Internet Explorer calculates padding towards inside of a block, while other browsers calculates padding towards outside of a block.
In IE, Actual Width = CSS width.
Others, Actual Width = CSS width + Left Padding + Right Padding.
The second one is standard CSS approved by W3C.