Why will this div/img not center in IE8? - html

I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett

Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>

The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.

Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.

You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).

FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex

This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>

Related

HTML and CSS not working

I'm just trying to make my CSS work with my HTML code but it's not working for some reason. I think I did everything correctly...maybe its just my browser? I'm on a mac using TextWrangler, testing with Safari/Chrome. Here is the code:
<!DOCTYPE html>
<html>
<head>
<div id="heading" name="heading" title="topbar">
<h2> Welcome to our website </h2>
<style type="text/css">
#bottom{
width:70px
color:green
align-content:center
}
</style>
</head>
<body>
<div id="bottom" name="bottombar" title="bottombar">
<h2>Welcome to our website </h2>
</body>
</html>
You cannot put <div> in the head section, here is the modified code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#bottom{
width:70px;
color:green;
align-content:center;
}
</style>
<title></title>
</head>
<body>
<div id="heading" title="topbar">
<h2>Welcome to our website</h2>
</div>
<div id="bottom" title="bottombar">
<h2>Welcome to our website</h2>
</div>
</body>
</html>
You forgot the closing semi-colons in the css ; and also forgot to close your divs, hope this helps.
There are so many things wrong:
Your head should not contain div tags
You forgot semicolons at the end of your CSS attributes
div should be closed (</div>)
Your divs are missing their closing tags i.e. </div>
I'm also not sure why you duplicate the div in the head. it should only be in the body.

CSS background elements on both sides of the screen

I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo

external css is working partially

In my code class "slides" is working through external css link but class header is working through inline css only.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="slides">
<div class="header" style="width:100%; background-color:#630;"><img src="gz1.gif">
</div>
</div>
</body>
</html>
style.css
head,body{background-color:#CCC; margin:0; padding:0;;}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{position:fixed;}
I want to work class "header" code from external link instead of inline code...
To avoid inline css in your code, update your html and css like below:
Here we will remove inline styling from header div..
<div class="header"><img src="gz1.gif"></div>
And we will add the inline style of header div in the style.css like so...
head,body{
background-color:#CCC;
margin:0;
padding:0;
}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{
position:fixed;
width:100%;
background-color:#630;
}

CSS Syntax for HTML - Using img.example element in my html

I have this CSS, however the elements need a unique class, or they interfere with the CSS used to create the website I'm using it on.
img{
display:inline-block;
width:211px;
height:146px;
border:1px solid white;
vertical-align:top;
margin-right:10px;
}
div{
display:inline-block;
width:311px;
}
I need to make them unique classes like:
img.example{
display:inline-block;
width:211px;
height:146px;
border:1px solid white;
vertical-align:top;
margin-right:10px;
}
div.example2{
display:inline-block;
width:311px;
}
So to start with, is that the correct way to make them classes?
If it is, how do I then apply them to the "**" sections of this HTML? The div becomes div.example2 ? How about using the img.example ?
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="accordion vertical">
<section id="vertabout">
<h2>Tutor-Led Course</h2>
**<img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/TutorLedCourse.jpg" height="134" width="208" />**
**<div>To view the tutor-led course information, please click here</div>**
<p><strong>IT Courses - Excel 2010 Basic</strong></p>
</section>
<section id="vertservices">
<h2>E-Learning Module</h2>
<p><p><img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/RelatedELearning.jpg" height="146" width="211" /> </p></p>
</section>
</div>
</body>
</html>
Apologies, but I am terrible with CSS and HTML :)
That is the proper way to select a tag with a class, but you need to add the classes.
<img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/TutorLedCourse.jpg"
height="134" width="208" class="example"/>
<div class="example2">To view the tutor-led course information, please click here</div>

Print Preview White Border around image in IE and Firefox

Firefox and IE display the border around image while doing print preview. It is a simple page with two div each div contains one image width of 400px and the container div is 800px. I do not want the white border in between the two images which I am getting while doing print preview. Is there anything I am doing wrong here?? (in chrome it does not display the white border.)
I have tried this code also for print css but no luck..
<style type="text/css" media="print">
.test{float:none;display:inline; border:none;}
img{border:0;}
</style>
The code is:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="print">
.test{float:left; display:inline; border:none;}
</style>
</head>
<body>
<div style="width:800px;margin:0px auto;">
<div class="test" style="float:left;width:400px;">
<img src="1334300111712.jpg">
</div>
<div class="test" style="float:left;width:400px;">
<img src="1334300115318.jpg">
</div>
</div>
</body>
</html>
Try adding this CSS:
img { border: 0; }