Jump to content


Images acting weird

Started by Live4Him2007, Aug 05 2008 01:49 PM

4 replies to this topic

#1 Live4Him2007

    Young Padawan

  • Members
  • Pip
  • 95 posts
  • Location:Indianapolis, Indiana, USA, Earth
  • Interests:Web Development, Graphic Design, writing, <br /><br />guitar, singing (badly), Sci-Fi : )

Posted 05 August 2008 - 01:49 PM

Ok, so I'm working on a new site, and I'm having some real issues. In Dreamweaver CS3, the images/divs look messed up. But when I preview with IE, Safari, or Firefox, everything looks almost ok.

But being a perfectionist, I want to know what's up.

I have posted both my CSS file and relevant HTML here too. So please bear with me.

Here's what it looks like in Dreamweaver. Everything SEEMS fine.
Posted Image

And here's what it does in Safari/FF/IE. Notice that it looks like that black section is pushing up the title area:
Posted Image


My CSS:
[indent]@charset "UTF-8";
/* CSS Document */

a:link {
color: #83000B;
}
a:visited {
color: #a8a8a8;
}
a:hover {
color :c00010;
text-decoration: none;
}
a:active {
color: #a8a8a8;
}

body {
background: #FFFFFF;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color:#000000;
}

#container {
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top:0px;
position:relative;
top:-15px;
}

#title {

width: 900px;
height: 90px;
float:left;

}

#spacer {
height:10px;
width: 900px;
float: left;
}

#black {
width:900px;
height: 260px;
margin-top: 10px;
float:left;
}

#ads {
width:900px;
height:80px;
}

#content {
width: 710px;
float: left;
padding: 10px;
}

#right {
width: 170px;
float: left;
}

#bottom_ads {
width: 900px;
float:left;
height: 60px;
}

#footer_image {
width:900px;
height:30px;
float:left;
}

#footer_text {
width:900px;
height: 25px;
float:left;
}
[/indent]
And, my Body HTML:

[indent]<body>
<div id="container">
<div id="title"><img src="images/title.jpg" width="900" height="90" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="534,12,890,46" href="#" /></map></div>
<div id="spacer"><img src="images/spacer.jpg" width="900" height="10" /></div>
<div id="black"><img src="images/blacksection.jpg" /></div>
<div id="ads">top ads</div>
<div id="content">
<h1>true song tech</h1>
<p>INDIANAPOLIS - August 5th, 2008</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="right">
<p>right side ads</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="bottom_ads">bottom ads</div>
<div id="footer_image"><img src="images/footer.jpg" width="900" height="30" /></div>
<div id="footer_text">
<div align="center"><br />
<a href="#">news</a> | <a href="#reviews">reviews</a> | <a href="#media">media</a> | <a href="#contact">contact</a> | <a href="#downloads">downloads</a><br />
<a href="#advertise_here">advertise here</a> | spread the word</div>
</div>
</div>
</body>[/indent]

Any help / fixes you know of would be GREATLY appreciated.

Thanks, P2L
MS

Edited by Live4Him2007, 05 August 2008 - 01:55 PM.

#2 Tyson D

    Young Padawan

  • Members
  • Pip
  • 85 posts
  • Gender:Male
  • Location:Canada

Posted 05 August 2008 - 02:10 PM

If you have your site up somewhere that would make it easier. It's harder to tell when I can't load your images but it might have to do with your margin-top/spacer. You might also need a clear div inside your container so that stuff goes inside of it.

#3 Live4Him2007

    Young Padawan

  • Members
  • Pip
  • 95 posts
  • Location:Indianapolis, Indiana, USA, Earth
  • Interests:Web Development, Graphic Design, writing, <br /><br />guitar, singing (badly), Sci-Fi : )

Posted 05 August 2008 - 02:54 PM

View PostTyson D, on Aug 5 2008, 07:10 PM, said:

If you have your site up somewhere that would make it easier. It's harder to tell when I can't load your images but it might have to do with your margin-top/spacer. You might also need a clear div inside your container so that stuff goes inside of it.


Good point. I'll upload it and post the link.

Thanks,
MS

#4 Live4Him2007

    Young Padawan

  • Members
  • Pip
  • 95 posts
  • Location:Indianapolis, Indiana, USA, Earth
  • Interests:Web Development, Graphic Design, writing, <br /><br />guitar, singing (badly), Sci-Fi : )

Posted 05 August 2008 - 03:00 PM

Ok, I uploaded the files to a subfolder of my other site: http://www.biosyourl...m/TrueSongTech/

The CSS file is located here: http://www.biosyourl...ongTech/css.css

And all the images are from "/Images/"

Any help would be very much appreciated!

Thanks,
MS

Edited by Live4Him2007, 05 August 2008 - 03:04 PM.

#5 Tyson D

    Young Padawan

  • Members
  • Pip
  • 85 posts
  • Gender:Male
  • Location:Canada

Posted 05 August 2008 - 03:41 PM

Thanks, that made things easier.
From what I can see, maybe removing the spacer div/image all together could fix the issue. If the gap becomes too small just increase the margin!
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design