What am I missing here? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

DaveX -> What am I missing here? (3/28/2008 23:09:54)

I'm experimenting with CSS and it'[s making pretty good sense finally however I'm missing something here. I've got a page with a simple table that I want a specific height from the top of the page (64px). I made a simple style:

body {
margin-top: 64px;
margin-left: 0px
}

This seemed to get the exact effect I wanted as I had the page open in FP. However, when I switched into preview or looked in a browser, the page margins seemed to be the default and the table floated toward the top and a bit away from the right. Here's the FP code for the table:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="750" id="AutoNumber1">
<tr>
<td width="550" colspan="3">
<img border="0" src="images/ud0208/ud0208_02.jpg" width="550" height="550"></td>
<td rowspan="2" valign="top" width="25"> </td>
<td rowspan="2" valign="top" width="325">
</td>
</tr>
<tr>
<td width="134"><font face="Arial">Minneapolis 2007<br>
<font size="4"><a style="text-decoration: none" href="ud0208_01.htm"><</a></font></font></td>
<td width="133">
<p align="center">
<font color="#808080">
<br>
</font></td>
<td>
<p align="right">
<a style="text-decoration: none" target="_top" href="Frame.htm">
<font face="Arial" color="#808080">Home</font></a><br>
<font size="4"><a style="text-decoration: none" href="ud0208_03.htm">></a></font></td>
</tr>
</table>


I'm thinking there's a conflict but I'm not spotting it. Either that or I did something flat out wrong. What am I missing?



Tailslide -> RE: What am I missing here? (3/29/2008 3:34:17)

Hi Dave

It's difficult to tell from those excerpts as there might be something else causing the issue - easier to just upload it to the web somewhere so we can have a proper play with it.

Things to help though:

1. Might be best while you're learning to use the zeroing approach which means adding something like: 
* html, body, ul, li {margin:0;padding:0;}

This will remove all the default padding and margins to all elements on the page - you can then add them back in as and where you require later on in the stylesheet. Why bother? Well because all browsers have different defaults.

2. If you're going to use CSS then I'd remove all possible presentational stuff from the markup (e.g. fonts, centering etc) and ensure that you've got a valid doctype. Mixing CSS in an external stylesheet with inline styling information is horribly confusing.

3. Maybe give your table an id and apply the margin-top to that?



DaveX -> RE: What am I missing here? (3/29/2008 11:40:57)

Thanks for the tips! I'll see what I can figure out. Just as an experiment I linked a totally blank, new page to the same style sheet and with the same results just using a line of text.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type=text/css"
href="picturepage.css" />
</head>

<body>

<p>fdgdfgdfxxhhg</p>

</body>

</html>

I tried you snippet of code as well with the same results.

Here's the original page:

www.sallymars dot com/ud0208_01.htm



Ryokotsusai -> RE: What am I missing here? (3/29/2008 11:55:44)

Try adding media=all to the link to the stylesheet
so it would be: 
<link media="all" rel="stylesheet" type="text/css" href="picturepage.css"/>

idk if it will help, but its worth a shot [:)]



jaybee -> RE: What am I missing here? (3/29/2008 16:57:16)

It's not pulling the stylesheet in. 

<link rel="stylesheet" type=text/css"
href="picturepage.css" />


You're missing " after type= and try keeping it all on one line. 

<link rel="stylesheet" type="text/css" media="screen" href="picturepage.css" />



DaveX -> RE: What am I missing here? (3/29/2008 23:32:25)

That was it, jaybee. Thanks for your keen eye! I'll try to look closer next time!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.152344E-02