Eleanor,
Welcome to the list and welcome to the wonderful, exciting and never ever
frustrating world of using CSS.
You were right. The problem did lie in the way you were doing the top
navigation. I would recommend slightly modifying your html and css to make
it a little easier on yourself.
Change the html to this:
<div id="nav">
<div id="nav1">
<a class="links" href="index.php">Home</a>
<a class="links" href="about.php">About</a>
<a class="links" href="gallery.php">Gallery</a>
<a class="links" href="history.php">History</a>
<a class="links" href="collectors.php">For Collectors</a>
</div>
</div>
Now we can set the image as a background for the nav division which makes
the whole process a lot easier.
Now it is just a matter of editing your css. I have the lines I edited
posted below, and comments explaining, albeit not all that clearly I am
sure, why the change. Go ahead and experiment with different values to
adjust margins and paddings and see the effects different lines have on your
layout in IE and firefox, but as of now, the design should work for you in
both browsers.
#nav {
margin: -8px -8px; /* Currently, the way you have this, the margin is set
to -8px on all sides */
margin-bottom: 0px; /* IE subtracts the -8px above from the height of div so
we needed the bottom margin to be 0 */
background: url(nav.gif) no-repeat; /* background-image instead of actual
image, easier to use, faster to load */
height: 145px; /* Height of your background-image to ensure that full image
shows */
display: block;
width: 701px; /* Width to ensure that image is show entirely */
}
#nav1{
padding-top: 120px; /* Pushes your text down */
padding-left: 70px; /* Pushes your text to the right -- margins don't work
here cuz of IE */
}
#body-container {background-color: #EFECD7;
margin: 15px 3px 10px; /* Here the top margin at 15px worked before but not
anymore */
margin-top: 0px; /* So I changed it here to 0 to bring container flush with
nav --- You can put this in the line above */
border-top: none; border-right: solid #BC901A 1px; border-left: solid
#BC901A 1px; border-bottom: solid #BC901A 1px;
padding: 15px;}
Thanks,
Tim Kadlec
Message: 24
Date: Mon, 11 Sep 2006 19:42:31 -0500
From: Eleanor Hand <[EMAIL PROTECTED]>
Subject: [css-d] Position links on Image bugs
To: [email protected]
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
Hello,
This is my first post to this forum so let me say thank you for
taking the time to look at this.
I have decided to try and create a client website using CSS
positioning as the main layout and design. Of course the learning
curve is huge and I'm stuck. So here I am. I am having several issues
with different browsers. They all seem to stem from positioning text
on top of an image. Everything is working well in Safari and Firefox
on my mac. The problem arises in IE on both the mac and the pc
platform. IE in Mac is currently not displaying the links but if it
were they wouldn't work as links. IE Windows is not displaying the
links at all. I am currently working to resolve this and would
appreciate input on whether or not this positioning issue is
resolvable. Am I better off using roll over buttons?
The site can be viewed here:
http://www.eleanorhand.com/clients/rangeloff/index.php
http://www.eleanorhand.com/clients/rangeloff/rageloffstyles.css
Thank You,
El
spamaholic(at)earthlink.net - it's my junk email and its real
_________________________________________________________________
Windows Live Spaces is here! ItÂ’s easy to create your own personal Web site.
http://spaces.live.com/signup.aspx
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
