I'm having trouble with a test site's design. When I'm opening my html page with IE, without my doctype line, it renders just the way I like it, but not in FF (because of the way it interprets padding, among other things). When I add the doctype line, the page gets squeezed to a height of about 230px. My intention is to set the height to the maximum page height.
Here are my files:
* index.html *
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<!--[if IE]>
<style type="text/css">
body {
text-align: center;
/* Remove padding: */
padding: 0;
}
#container {
/* Mind the box model in IE.. */
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
<div class="header">
<h1>Logo</h1>
</div>
<div class="nav widget-header ">
<!-- main nav -->
<div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div>
<div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div>
<div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div>
<div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div>
<div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div>
</div >
<div class="content">
<!--content area-->
<p>content</p>
</div>
<div class="footer">
<!-- footer -->
<p>© Copyright</p>
</div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>
* stylesheet.css *
/* reset */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
sbutton_cl, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.body{
line-height: 1;
text-align: center;
}
.widget-header {
background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
}
.state-default {
background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
font-size: 1em;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
.container {
border: 1px solid #999999;
margin: 0 auto;
width: 800px;
height: 100%;
background-color:#999999;
}
.header {
border: 1px solid #999999;
height:10%;
margin-top: 0;
padding: 10px;
}
.nav{
border: 1px solid #999999;
height:10%;
margin-top: 2%;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.nav-button {
float: left;
height: 100%;
margin-left: 3px;
overflow: hidden;
width: 150px;
}
.content{
border: 1px solid #999999;
height:60%;
margin-top: 4%;
padding: 10px;
background-color:#FFFFFF;
}
.footer{
border: 1px solid #999999;
height:10%;
margin-top: 4%;
padding: 10px;
text-align: center;
vertical-align: middle;
background-color: #FFFFFF;
}
What I'm ultimately trying to do is a design with fixed width and percentage-based height, where child divs are also percentage-based positioned to their parents ( I believe this is the correct way to deal with different screen resolutions ).
I'll be very grateful if anyone can help me with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#wrapper { background:red; }
html,body{height:100%;}
#wrapper{min-height:100%;}
</style>
<!--[if IE 6]><style>
#wrapper { height:100%; }
</style><![endif]-->
</head>
<body>
<div id=wrapper>
<p>Hello from JS Bin</p>
<p id="hello"></p>
</div>
</body>
</html>
It isn't clear which version of Explorer you're using (apart from 6), but min-height is read as height by some versions...
However - this is the professional (and easiest way) way to build HTML/CSS:
validate your HTML (important, as invalid HTML can confuse browsers in unpredictable ways!)
get it working and looking how you like in FF;
add conditional comments for IE6 and (if necessary) IE7 and 8.
In IE 6 remember that padding etc. is not added to a box, so will decrease any width or height. Also, some elements without certain CSS properties, e.g. no specific width or height (or auto), do not trigger 'haslayout' in IE.
That may not have solved the problem directly, but I hope it helps pin things down!
Though I appreciate his effort, meder's answer was helpful, but incomplete since i want to have a percentage-based design. Dave's answer is more like guidelines. The best solution to my problem is something similar to this:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Now my problem is solved, thank you for your help.
Related
Hello i am trying to stop elements from moving when the browser gets resized, for example when i make the chrome window smaller everything starts moving towards the left in a different position, including the text that overlaps the menu bar, Can i keep it in the same position even when i resize the window?
This is the start of my HTML code:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/alternativeCSS2.css"
title="bigsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS2.css" title="mediumsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS3.css" title="smallsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS4.css" title="specialsheet"/>
<script type="text/javascript" src="script/CTEC1800-Stylesheets(4).js" >
</script>
<title>Historical Pioneers</title>
</head>
<body onload="chooseStyleBySize()">
<div id="layout">
<div id="swapping">
<p>
<select onchange="setActiveStyle(this.value)">
<option value="bigsheet">For big pages</option>
<option value="mediumsheet">For medium-sized pages</option>
<option value="smallsheet">For small pages</option>
<option value="specialsheet">For special pages</option>
</select>
</p>
</div>
<div id="header">
<h1 id="logo"><img src="img/logo.png" width="200px" height="70px"
alt="logo" /></h1>
</div>
</div>
<div id="nav" class="box">
<ul class="nav">
<li id="active">Home</li>
<li>Adolf Hitler's Biography
</li>
<li><a href="Winston Churchill.html">Winston Churchill's
Biography</a></li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div id="container" class="box">
<div id="intro">
<div id="intro-in">
<h1>60 million men fought in 'The War to End All Wars', It ended
nothing..</h1>
<p class="intro">
"Putting history in it's place". For many years we have been
collecting, researching and interpreting historical information from the
World War 2, How the key figures including Adolf Hitler and Franklin D.
Roosevelt influenced this great war between 1939 to 1945.
Some information that was not yet looked into properly that
was very well important and how it all began in the first place.
</p>
</div>
<div id="hr">
<hr />
This is my CSS Code:
/*--------------------- Main Body --------------------- */
* {
margin: 0;
padding: 0;
}
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset,
legend, dl, dt, dd, blockquote, applet, object {
border: 0;
}
p {
margin: 15px 0;
}
body {
padding: 0;
background-color: #ededed;
background: #fff url("../img/bg1.jpg") repeat-y;
font: 0.8em/1.5 "arial", sans-serif;
color: #354146;
text-align: center;
width: 100%;
}
#layout {
}
#header{
text-align: left;
margin-left: 30px;
}
#swapping{
text-align: left;
margin-left: 45px;
}
#container{
margin-left: 40%;
clear: both;
width: 100%;
}
/*--------------------- Horizontal Navigation Menu --------------------- */
#nav {
margin: 0;
height: 100%;
margin-top: 20px;
}
#nav ul {
list-style-type: none;
width: 14%;
min-width:265px;
height: 100%;
clear: both;
text overflowing to the menu bar
You can do that by fixing width of your html body, but that doesn't make sense since you want to build RESPONSIVE web sites, not fixed ones which work only on certain resolutions!
Just type this in your CSS:
body{
width: [pixel_size]px;
}
I seem to be having an issue with my Science project.
For some reason in Safari and Firefox (Haven't tested Chrome), There seems to be a padding/margin on the top menu, the iframe seems to be working fine, I'll replace it with a div for now and links to nowhere, yet the top of the document doesn't and has what I guess would be a top border, I don't recall adding it though. I honestly can't see whats wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Science Project</title>
<style>
html, body {
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#000;
}
div.header {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
height: 100px;
width: 100%;
font-family:Arial, Helvetica, sans-serif;
color: #000;
border-bottom:20px solid #09F;
border-top-left-radius:12px;
}
p.title {
padding-top: 20px;
padding-left:20px;
}
div.menu {
width:100%;
height:80px;
border-bottom-left-radius:12px;
background-color:#fff;
border-bottom: 1px solid #000;
}
a.button {
display:table-cell;
width:120px;
height:80px;
border-bottom-left-radius: 10px;
background-color:#999;
text-decoration:none;
color:#FFF;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
height:calc(100% - 221px);
width:100%;
}
</style>
</head>
<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>
If you could let me know what exactly I'm doing wrong here, I was able to get this to work last time. I'm just finding this rather odd.
jsfiddle: http://jsfiddle.net/ny4fH/
Thanks!
Josh
You are experiencing margin-collapse.
<p class='title'>The Big Bang Theory Explained.</p>
Paragraphs, by default have a top and bottom margin. This is the problem. You can prevent margin collapse with:
.header { overflow: hidden }
Or other fancy tricks described here. (Fiddle)
your code is ok.
Just remember to reset values of the tags you use. In this case it was the paragraph tag.
p { margin: 0; }
You can as well avoid paragraphs margins by hiding the parent (.header) overflow
.header { overflow: hidden; }
Hi I am developing a Resume in HTML. I am having problem with my inline-block as both the div that are required to be placed with each other using inline-block are not showing the expected results one of the div slightly moved downwards.
It seemed to be some sort of positioning issue but I am unable to figure it out.
The div are concerned with S-boxes and L-boxes style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8/>
<title>HELLO STRICT</title>
<style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
display: block;
}
h1{
color: #906;
font-family: "Arial Black", Gadget, sans-serif;
margin-bottom: 0px;
}
h4{
margin-bottom: 0px;
margin-top: o;
}
<style>
time
{
font-style: italic;
}
li {
padding-left: 0px;
text-indent: 0em;
}
div.S-boxes{
width: 200px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
text-align: right;
}
div.L-boxes{
width: 500px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
}
p.inbox{
margin-top:16px;
}
</style>
</head>
<body>
<h1>Muhammad Qais</h1>
<div>
<ul style="list-style: none; padding-left: 0px;">
<li>Village Sooj Bahadar, P.O. Mandra.
<li>Tehsil Gujarkhan
<li>District Rawalpindi
<li>Pakistan
</ul>
<table>
<tr>
<td>
<img src="Telephone-icon-1-.gif" width="27" height="27">
</td>
<td>
: +92-347-9714967
</td>
</tr>
<tr>
<td>
<img src="letter_closed.png" width="27" height="27">
</td>
<td>
: muhammadqais32#yahoo.com
</td>
</tr>
</table>
</div>
<div class="S-boxes">
<h4>Objective</h4>
</div>
<div class="L-boxes">
<p class="inbox">Seeking a challenging opportunity where I will be able to utilize my strong organizational skills, educational background, and ability to work well with people, which will allow me to grow personally and professionally. I am self-motivated and able to work both independently and as collaborative team member.</p>
</div>
</body>
</html>
display: inline-block; helps us here to render two square gray boxes next to each other. Awesome, right? However, with varying content, we need to add the property vertical-align: top to make sure everything is aligned to the top.
div.S-boxes{
width: 200px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
vertical-align:top;
text-align: right;
}
div.S-boxes{
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div.L-boxes{
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
I've been bashing my head over some CSS issues and figured out it was the doctype.
The production site carries
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Where as our stage site carries
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
When using the production tag many of my text colors, sizes etc for my List elements disappear.
I use the 960 grid css file followed by its reset and text.css files.
After that I have a main.css file with my own styles, yet specifically the font stylings for my list inside a specific div don't get recognized
Below is the CSS for the page followed by the HTML
.sideBox {
width: 225px;
float: right;
text-align: left;
}
.sidebox ul, #slideMenu ul {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
margin-top:8px;
}
#slideMenu ul li {
margin-right:10px;
padding-right: 10px;
float: left;
width:150px;
border-right: 1px solid #cccccc;
}
.sidebox li {
height:124px;
margin: 0;
padding: 0 10px;
border-bottom: 1px solid #cccccc;
}
.sidebox li:first-child{
height:123px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.sidebox h3, .sidebox p
{
margin: 0;
color: #707070;
padding:0;
font-size: 22px;
margin-top:1px;
font-weight:500;
}
.sidebox p {
font-size:18px;
color:#a6a6a6;
}
.infoBoxDiv {
height: 100%;
vertical-align: middle;
}
.infoBoxDiv h2, infoBoxDiv.p {
height: 100%;
vertical-align: middle;
}
.sidebox li.infohighlighted {
border-top: 2px solid #00A4E4;
border-bottom: 2px solid #00A4E4;
position:relative;
top:-1px;
height:121px;
}
.sidebox li:first-child.infohighlighted {
border-top: 2px solid #00A4E4;
border-bottom: 2px solid #00A4E4;
position:relative;
top:0px;
height:121px;
}
.sidebox li.infohighlighted p {
color: #707070;
font-family: Georgia;
}
.sidebox li.infohighlighted h3 {
color: #00A4E4;
font-family: Georgia;
margin: 0px;
top: -1px;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/960.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery_ui.js" type="text/javascript"></script>
<script src="js/rotator.js" type="text/javascript"></script>
</head>
<body style="background-color:#e4e5ef;"><br><br>
<div class="container_16" style="background-color:#fff;"><br><br>
<div id="splashContainer">
<div id="jqb_object">
<div class="jqb_slides">
Slides Here
</div>
</div>
<div class="sideBox">
<ul id="slideList">
<li id="infoBox_0" class="infoDefault infoHighlighted"><br><h3>$95 Rx Glasses</h3><p>Vintage inspired frames with prescription lenses</p></li>
<li id="infoBox_1" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new exclusively designed styles</p></li>
<li id="infoBox_2" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
<li id="infoBox_3" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li>
</ul>
</div>
</div>
<div id="mediaBanner" class="subContainer">
<div id="featuredIn">
<span style="vertical-align:middle; line-height:38px;">Featured In:</span>
<img src="images/nyTimes.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/vogue.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/dailyCandy.png" style="vertical-align:middle;margin:none;padding:none;">
<img src="images/gq.png" style="vertical-align:middle;margin:none;padding:none;">
<span style="vertical-align:middle; line-height:38px;color:#ccc; padding-left:30px;font-style:bold;">|</span>
</div>
<div id="socialBox"><span style="vertical-align:middle; line-height:38px;">Join Us | Follow Us</span></div>
</div>
<div class="subContainer miniBoxContainer">
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4>Check out the new collection</div>
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4>Check out the new collection</div>
<div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4>Check out the new collection</div>
</div>
</div>
</body>
</html>
The doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
triggers Standards mode in browsers, while the other one triggers Quirks mode.
In Quirks mode, browsers emulate the bugs of old browsers (very old, we're talking IE 5.5 here) in order to cope with sites designed by people unfamiliar with the standards. In this mode browsers are much more inconsistent with each other, and (in some cases) don't support some newer features of CSS at all. This makes Quirks mode highly undesirable.
In standards mode, browsers are much less forgiving of errors in the CSS. http://jigsaw.w3.org/css-validator/ will help you find them.
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.