2 replies [Last post]
zarfol
Offline
newbie
Last seen: 15 years 24 weeks ago
Joined: 2004-01-28
Posts: 2
Points: 0

I used the cssforum.com creator to get some styles because I had to scrap my webpage earlier. I got everything working great until i started adding images into the page.

I have a header, a link row, and a main page ...

(BTW, this page has a width of 600 px and is centered in the page)

----------
Header
----------
Link Row
----------
Page
text goes
here
----------

Now i got rid of the space between the header and the link row, however, Internet explorer wants to add a space between the Link Row and the Page Text and I don't want that. I figured out if there is a blank space, internet explorer adds a line because the space wouldn't fit in the 600px box.

The page works fine in mozilla 1.5 and Firebird .7.

Some of the code is from csscreator.com and i quoted that in the style... but I might have badly altered that code and made it screwy.

Thanks for any help

Zarfol

INDEX.HTML

<html>
<head>
<title>The Speculator Webpage</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<div id="Page">

<div id="Header">
<div class="HeadingContent"><img src="images\header.jpg"></div>
</div> <!-- Close div for Header -->

<div id="LinkRow">
<div class="LinkRowContent"><img src="images\left_end.jpg"><img src="images\frontpagebutton.jpg"><img src="images\newsbutton.jpg"><img src="images\opinionsbutton.jpg"><img src="images\elbutton.jpg"><img src="images\featurebutton.jpg"><img src="images\sportsbutton.jpg"><img src="images\right_end.jpg">
</div>
</div> <!-- Close div for LinkRow -->
<div id="outer">
<div id="inner">
<div id="Main">
<div class="PageContent">hello</div><!-- Close div for PageContent -->
</div> <!-- Close div for Main -->
<div class="clr"></div>
</div> <!--Close div for inner -->
</div> <!-- Close div for outer -->
</div> <!-- Close div for Page -->
</body>
</html>

STYLE.CSS

html, body {background: url(images/background.jpg); padding: 0; text-align: center; margin: 0; border:0;}

#Page {width: 600px; text-align: left; min-width: 600px; margin-left: auto; margin-right: auto;}

#Header {height: 100px; width: 100%; margin:0; border:0; padding:0;}

#LinkRow {height: 33px; width: 100%; margin:0;}

/* might need to be 0, in case it is not straight */
#Main {width: 600px; float: left; position: absolute; margin-left: -600px; margin-right: 1px; background: url(images/box.gif); color: white; }

/* This fix for netscape is from http://www.csscreator.com
/
left column width. NN4 hack to hide borders
left column colour */
#outer {border:solid white 0px; border-left-width: 600px ; border-left-color: #cccccc; border-left-style: solid; width: auto;}

#inner {margin:0; width:100%;}

/* End of Fix from http://www.csscreator.com */
.clr {clear:both;}

.HeadingContent {padding:0;}

/* padding for content */
.PageContent {padding: 5;} /*this is so the background image (has a small border, doesn't ruin the text */

.LinkRowContent {padding: 0;}

/* This is also a fix from http://www.csscreator.com */
#header .content {padding-bottom:0;}

img {border: 0; padding: 0; margin: 0;}

/* padding bottom 0 to remove space in IE5 Mac */

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

IE problem (adds a blank line between two sections)

Hi zarfol,
Can you link to an example page so we can have a closer look.

zarfol
Offline
newbie
Last seen: 15 years 24 weeks ago
Joined: 2004-01-28
Posts: 2
Points: 0

IE problem (adds a blank line between two sections)

ok, here is the site.

http://free.hostdepartment.com/S/Speculator/template/index.html

http://free.hostdepartment.com/S/Speculator/template/style.css

in netscape/firebird, the webpage looks great.

In internet explorer, under the link row (fron page, opinions,features, etc etc), there is a 4 pixel extra space that I have been unable to get rid of - even after i fiddled with the margins.

I have a temporary fix for it, i added a 4 pixel black on the bottom of each of those images (plus the border) and did a margin-top: -4px;

but I would like to be able to fix this by the css method.

CSS is great, i learned it is one day from the o'reiley book i got from a library. Obviously i am no expert but it is a lot easier than tables.

Thanks for any help