Coding question...

**Anissa** · 04-11-2011, 01:50 PM

I coded a temp page as the home page for my site, and it passed validation. It works great on all browsers, and I even looked at the page through a friend's desktop computer.

HOWEVER...

When I looked at it on a laptop, three elements were shifted horridly to the right. How do I fix this?

**rah** · 04-11-2011, 03:59 PM

What OS (operating system) is on the laptop and the desktop? What browsers (and versions) were you using when viewing your site on both?

**Anissa** · 04-11-2011, 05:14 PM

desk, win 7, laptop and mine vista. chrome and firefox (the latest versions)

**Anissa** · 04-11-2011, 07:06 PM

I don't know how old the browser on my friend's laptop is. She is an older woman, and I have to keep reminding her to do a virus scan periodically. Chances are she may not have an updated version of the ff browser.

**Bliss Ellison** · 04-12-2011, 03:38 AM

Yeah that might be the problem. Do check the browser version at your friend's laptop, upgrade it if it hasn't been, then compare the results. Moreover, also verify on some other systems and using different browsers. Hope you will get your problem fixed.

**rah** · 04-12-2011, 08:34 AM

Sorry for the delayed response.

Looking at your code I've noticed the absolute positioning you are using on the divs that contain content. I think that's your biggest problem. If the div you have centering all the content isn't positioned as well when you use the absolute position on the inner divs they use document window instead of that containing div. I would start by just making three divs for the three columns in the middle and just floating those next to each other with no absolute positioning on them. Then just put the other elements inside of those three accordingly.

**martindow** · 04-12-2011, 06:51 PM

I'm using Firefox 4 on Windows 7 and the three photos are offset to the right. I think this is a coding issue rather than outdated browsers.

**Anissa** · 04-12-2011, 08:22 PM

Originally Posted by rah

Sorry for the delayed response.

Looking at your code I've noticed the absolute positioning you are using on the divs that contain content. I think that's your biggest problem. If the div you have centering all the content isn't positioned as well when you use the absolute position on the inner divs they use document window instead of that containing div. I would start by just making three divs for the three columns in the middle and just floating those next to each other with no absolute positioning on them. Then just put the other elements inside of those three accordingly.

I am piecing the code together from what I can find on the internet. I am new to css. The last time I did this was with front page. Could you give me some pointers on how the code should look? I can't find an HTML 4.01 book anywhere anymore. There are all HTML5, and that is what started my mess in the first place.

**rah** · 04-13-2011, 02:43 PM

Below is a quick html page that uses the css I was talking about. I should be a good starting point for you to base your layout on. I hope it helps.

When you add your other boxes into the columns you won't need the position: absolute; that you are currently using on each div.

Code:

<!DOCTYPE html> 
<html dir="ltr" lang="en-US"> 
<head> 
<meta charset="UTF-8" />
<title>Example CSS Layout</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, 
pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, 
i, center, dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0px;
	padding: 0px;
}
body {
	margin: 10px;
	color: #000000;
	background-color: #AFD2B8;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
.container {
	margin: 0px auto;
	width: 960px;
}
.header {
	margin-bottom: 10px;
	height: 145px;
	background-color: #C2D8DD;
}
.leftcol {
	margin-right: 10px;
	float: left;
	width: 175px;
	background-color: #7B898C;
}
.middlecol {
	float: left;
	width: 490px;
	background-color: #CBE9D3;
}
.rightcol {
	margin-left: 10px;
	float: left;
	width: 275px;
	background-color: #7B898C;
}
.footer {
	margin-top: 10px;
	height: 145px;
	background-color: #C2D8DD;
}
.clear {
	clear: both;
}
</style>
</head>
<body>
  <div class="container">
    <div class="header">
      Header
    </div>
    <div class="leftcol">
      Left Column
    </div>
    <div class="middlecol">
      Middle Column
    </div>
    <div class="rightcol">
      Right Column
    </div>
    <div class="clear"> </div>
    <div class="footer">
      Footer
    </div>
  </div>
</body>
</html>

**Anissa** · 04-16-2011, 09:11 PM

*blushes slightly* ty ty ty ty ty ty ty. I really needed this help. You have no idea.

bugging you one more time, maybe? Sorry for all the questions.

Code:

ul
{
list-style-type:none;
text-align: center;
}
#nav li a{
display: block;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none; }
#nav li {
	float: left; }
#nav li a:link {color: #336C7A;
}
#nav li a:visited{color: #336E79;}
#nav li a:hover{
color: #faf0e6;
background-color: #A65045;
}
#nav li a:active{
color: #8A9D8F;
}

How do I get the horizontal navigation to center? It's all the way to the left?

Thread: Coding question...

Thread Tools

Display

Coding question...

Posting Permissions