I recently built my second website from scratch and when I “run” it in Notepad++ say in Firefox it looks fine but after uploading it the 3rd column shoots up on the page.
Its also doing something weird in IE. Did I screw up the IE box model or is there a hack I can upload into the “Doctype” declaration?
My images are also screwed up but Ill fix that later. The layout rendering is whats screwing me up. CSS can be maddening it seems for us newbies
Hampton NY Waterfront property for rent
you have to create style sheet for IE use the block to use it in IE
<!–[if IE]>
<link rel=“stylesheet” type=“text/css” href=“all-ie-only.css” />
<![endif]–>
Hi,
It’s mainly the double margin bug on floated elements that have side margins. Add display:inline to your left and right column floats to squash the bug (see faq on floats for more info).
That’s a very fragile way to get your third column into position by dragging it up with a negative margin which means that it will only ever work at that exact content height and should someone resize the text or of you change the content then it all goes to pot.
Float all three columns with appropriate widths and then they will always be in the correct place.
You have a fixed pixel width layout then you have given your three columns percentage widths and em padding. How do you know that it will all fit?
In a fixed pixel width layout you should use pixels for the column widths and pixels for the horizontal padding and borders so that you can add them all up easily and make sure they fit. In a percentage layout use percentages and in an em container use ems.
ems are best to use throughout but you should also set the main container in ems but also set a max-width in pixels to stop it expanding too far. However ems are harder to work with and won’t give pixel precision.
Here is the layout tidied up a bit but needs a lot more work.
<!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" lang="en" xml:lang="en">
<head>
<title>Hampton NY Waterfront property for rent</title>
<link rel="stylesheet" type="text/css" />
<Style>
.body {
width:920px;
border: solid #A0D8EF;
margin: 0 auto;
color: #324248;
font-style:"Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
background: #a0d8ef; /* old browsers */
background: -moz-linear-gradient(top, #a0d8ef 0%, #ddf1f9 18%, #feffff 98%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a0d8ef), color-stop(18%, #ddf1f9), color-stop(98%, #feffff)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff', GradientType=0 ); /* ie */
}
.masthead {
color:#2C454F;
width:100%;
text-align:center;
margin:0 0 2em;
}
.masthead h1{margin:1em 0 0}
div.masthead h2 {
margin:.5em 0 0;
}
.navbar {
width:100%;
color:#002570;
overflow:hidden;
}
.navbar ul {
list-style: none;
margin:0 0 0 5.25em;
padding: 0;
font-size: 1.25em;
float:left;
dislay:inline;
}
.navbar li {
float:left;
margin: .75em 1.5em;
text-decoration:none;
display:inline;
}
.navbar a {
text-decoration:none;
color:#002570;
}
.navbar li a {
display: block;
background-color: #D6EEF7;
border: 1px solid #F0F9FC;
padding: .25em;
}
.navbar li a:hover {
background-color:#A7DAF0;
text-decoration:none;
}
.col_1 {
width:20%;
float:left;
margin: 1em 0 0 1%;
background-color:#a3e9fa;
font-size:1.1em;
padding:.5em;
background-color:#E1F2F9;
display:inline;
}
.content {
width:50%;
margin:4em 0 1em 0;
font-size:1.1em;
float:left;
}
.content p {
margin: 0 0 0 -1.5em;
padding: 1em 0 0 3em;
font-size:1.1em;
}
.content img {
margin: 1em 0 0 0;
}
.col_3 {
width:20%;
margin:1em 1% 0 0;
float:right;
font-size:1.1em;
padding:.5em;
background-color:#E1F2F9;
display:inline;
}
.footer {
clear:both;
font-size:1.25em;
color: #546E78;
text-align:center;
}
/*-----------------------------------------------end body------------------------------*/
</style>
</head>
<body>
<div class="body">
<div class="masthead">
<h1>Waterfront Property For Rent In Southhampton NY</h1>
<h2>Year Round Rental</h2>
</div>
<div class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About The Rental</a></li>
<li><a href="http://www.shinnecocknation.com" target="_blank">The shinnecock</a></li>
<li><a href="https://picasaweb.google.com/William631" target="_blank">Photographs</a></li>
</ul>
</div>
<div class="col_1">
<p>We have a small waterfront cottage for rent located in the Shinnecock Hills section of Southhampton.
The property is on a peninsula, and so it's on a quiet no outlet road, just south of Montaulk Highway.</p>
<p>This website is here to give prospective tenants a look at it via the internet. For a viewing please call.</p>
<div class="contact">
<h3>Contact Us</h3>
<address>
108 Little Neck Road<br />
Shinnecock Hills NY 11968<br />
Phone# 631-235-0186 William <a href="mailto:Williamm631@verizon.net">Email</a> <br />
</address>
</div>
<div class="googlelink"><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&q=108+Little+Neck+Rd,+Shinnecock+Hills,+Suffolk,+New+York+11968
&aq=&sll=23.32208,-85.253906&sspn=40.604251,76.640625&ie=UTF8&geocode=FTXCbwIdYp6u-w&split=0&hq=&hnear=108+Little+Neck+Rd,+Shinnecock+Hills,+Suffolk,
+New+York+11968&ll=40.87834,-72.440543&spn=0.004153,0.009356&t=h&z=17"> google maps link</a> </div>
</div>
<div class="content">
<p> It's been said that location is everything. This property proves it. A serene, peaceful slice of the hamptons is here for rent.
I'm the family carpenter and they have asked that I help them rent it. I believe once seen it will rent itself.</P>
<p>This photograph is from the backyard of these houses.</p>
<p><img src="http://shampton.us/images/boat_small.jpg" alt="hamptons rental" width="432" height="324"/></p>
</div>
<div class="col_3">
<p>This property sits adjacent to the Shinnecock Nation native American property a fully autonomous nation,
which is 1400 acres and is designated as a wetlands conservation area.</p>
<p>It is located within walking distance of the Marine Science Center of Stonybrook University.</p>
<p>Tenants should be aware of the enviroment and be aware that the property needs to be kept in a clean organized manner at all times.
This is a pristine beautiful place and we would like it kept that way. </p>
<p><a href="https://www.facebook.com/pages/South-Hampton-Water-Front/120658387990831">The Facebook page</a></p>
</div>
<div class="footer">
<p>Feel free to contact us to request a lease application</p>
</div>
</div>
</body>
</html>
Still an IE thing going on.
Can someone point me to a link somewhere where I can figure out how to write CSS just for IE. Comments across the web regarding IE being a pain. . Ive been using Chrome and Firefox as baselines but maybe I need to make IE the baseline and modify the other browsers?
I can see now why all the comments across the web decry IE as a pain. I’m totally new at this and can’t seem to get my head around the IE hacks.
Any and all help would be appreciated
Thanks
http://shampton.us
That’s the wrong approach I’m afraid. Once you start down that road it’s a slippery slope. There are bugs in IE but they are easy to squash with valid code and 99% of the time you don’t need hacks. You just need to code properly from the start.
Read the CSS FAQ on haslayout and on floats and you will have most IE bugs covered. It’s a nightmare to maintain multiple stylesheets so you really want to avoid that.
You can use conditional comments to target any version of IE but I doubt there’s a single thing in your page that would need it.
Your original code wasn’t really structured correctly from the start which is why you started running into bugs. You need a more logical, valid and consistent approach to achieve better results.
I’ve tidied it up again for you and this looks much the same to me in ie6 - 8 as well as other modern browsers and has no real hacks or forked code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hampton NY Waterfront property for rent</title>
<link rel="stylesheet" type="text/css" />
<style type="text/css">
html, body, table{
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe,
h1, h2, h3, h4, h5, h6, p,
dl, dt, dd, ol, ul, fieldset,
form, legend, table, caption, th, td {
margin: 0;
padding: 0;
}
ol, ul {list-style: none;}
p{margin:0 0 1em}
.body {
width:920px;
border: solid #A0D8EF;
margin: 0 auto;
padding:1px 0;
color: #324248;
font-style:"Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
background: #a0d8ef; /* old browsers */
background: -moz-linear-gradient(top, #a0d8ef 0%, #ddf1f9 18%, #feffff 98%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a0d8ef), color-stop(18%, #ddf1f9), color-stop(98%, #feffff)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff', GradientType=0 ); /* ie */
line-height:1.3;
}
h1,h2 {
color:#2C454F;
width:100%;
text-align:center;
}
h1{margin:21px 0 9px}
h2{margin:0 0 48px;}
ul.navbar {
list-style: none;
font-size: 1.25em;
width:100%;
text-align:center;
width:100%;
color:#002570;
overflow:hidden;
margin:0 0 2em;
padding:0;
}
.navbar li {
display:inline;
}
.navbar li a {
margin:0 1.5em;
text-decoration:none;
display: inline-block;
background: #D6EEF7;
border: 1px solid #F0F9FC;
padding: .25em;
color:#002570;
}
.navbar li a:hover {
background:#A7DAF0;
text-decoration:none;
}
.col_1, .col_3 {
width:182px;
float:left;
margin:0 19px 1em 10px;
background-color:#a3e9fa;
font-size:1.1em;
padding:1px 8px 15px;
background-color:#E1F2F9;
display:inline;
}
.col_3 {
margin:0 10px 0 0;
float:right;
}
.col+3 p.last{margin-bottom:0}
.content {
width:467px;
margin:0 0 1em;
padding:1px 0;
font-size:1.1em;
float:left;
}
.content p {
margin: 0 0 1em;
font-size:1.1em;
padding:0 5px;
}
.content p.img {
padding:16px;
background:#ccd3d5;
border:1px solid #fff;
}
.content p.img img{border:1px solid #fff}
.footer {
clear:both;
font-size:1.25em;
color: #546E78;
text-align:center;
}
</style>
</head>
<body>
<div class="body">
<h1>Waterfront Property For Rent In Southhampton NY</h1>
<h2>Year Round Rental</h2>
<ul class="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About The Rental</a></li>
<li><a href="http://www.shinnecocknation.com" target="_blank">The shinnecock</a></li>
<li><a href="https://picasaweb.google.com/William631" target="_blank">Photographs</a></li>
</ul>
<div class="col_1">
<p>We have a small waterfront cottage for rent located in the Shinnecock Hills section of Southhampton.
The property is on a peninsula, and so it's on a quiet no outlet road, just south of Montaulk Highway.</p>
<p>This website is here to give prospective tenants a look at it via the internet. For a viewing please call.</p>
<div class="contact">
<h3>Contact Us</h3>
<address>
108 Little Neck Road<br />
Shinnecock Hills NY 11968<br />
Phone# 631-235-0186 William <a href="mailto:Williamm631@verizon.net">Email</a> <br />
</address>
</div>
<div class="googlelink"><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&q=108+Little+Neck+Rd,+Shinnecock+Hills,+Suffolk,+New+York+11968
&aq=&sll=23.32208,-85.253906&sspn=40.604251,76.640625&ie=UTF8&geocode=FTXCbwIdYp6u-w&split=0&hq=&hnear=108+Little+Neck+Rd,+Shinnecock+Hills,+Suffolk,
+New+York+11968&ll=40.87834,-72.440543&spn=0.004153,0.009356&t=h&z=17"> google maps link</a> </div>
</div>
<div class="content">
<p> It's been said that location is everything. This property proves it. A serene, peaceful slice of the hamptons is here for rent. I'm the family carpenter and they have asked that I help them rent it. I believe once seen it will rent itself.</p>
<p>This photograph is from the backyard of these houses.</p>
<p class="img"><img src="http://shampton.us/images/boat_small.jpg" alt="hamptons rental" width="432" height="324"/></p>
</div>
<div class="col_3">
<p>This property sits adjacent to the Shinnecock Nation native American property a fully autonomous nation,
which is 1400 acres and is designated as a wetlands conservation area.</p>
<p>It is located within walking distance of the Marine Science Center of Stonybrook University.</p>
<p>Tenants should be aware of the enviroment and be aware that the property needs to be kept in a clean organized manner at all times. This is a pristine beautiful place and we would like it kept that way. </p>
<p class="last"><a href="https://www.facebook.com/pages/South-Hampton-Water-Front/120658387990831">The Facebook page</a></p>
</div>
<div class="footer">
<p>Feel free to contact us to request a lease application</p>
</div>
</div>
</body>
</html>
You must be consistent and make sure that everything adds up correctly and actually fits in the space allocated. Make sure that you have controlled the default margins, padding and line-height and set suitable font-sizes preferably in ems.
You were hacking the margins because you hadn’t controlled them. Some browsers apply top and bottom margins by default and some apply only a bottom margin but all apply different amounts anyway. You need to take control and set margin and padding to something that you can rely on. In truth it’s mainly margins that are added by default apart from html,body, ul ol which have both margin and padding in some browsers.
Lastly never use a hack unless you know the reason for it. Just because something doesn’t fit doesn’t mean you can just hack it into submission. Find out why its wrong and when it turns out to be a bug then you can hack it. Nine times out of ten though it will be sloppy or inconsistent coding that is causing the problem.
Thank you so much.
As I stated I’m new at this web development stuff. By just taking your CSS “AND” Html changes and comparing them side by side, line by line in notepad. I saw things with clarity that I couldn’t quite get my head around.
I can see that I’m going “Div” crazy to style before I even think about content. I know this can’t be good.
I think I’ll work on my mark-up further and make sure my structure is proper before I worry about style so much.
Thanks again you were a great help