Wrox Programmer Forums
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 19th, 2007, 01:38 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 347
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Adam H-W
Default positioning issue

I've got a div and am placing a menu inside it which is in a table - so the code is:

<div id="masthead">

<div id="menu"><table width="570" border="0">
  <tr>
    <td><img src="images/home_on.gif" alt="Home" name="home" border="0" id="home"></td>
    <td><a href="midwife.html" onMouseover="imgOver('midwife')" onMouseout="imgOut('midwife')"><img src="images/midwife_up.gif" alt="midwife" name="midwife" border="0" id="midwife"></a></td>
    <td><a href="services.html" onMouseover="imgOver('services')" onMouseout="imgOut('services')"><img src="images/services_up.gif" alt="Services" name="services" border="0" id="services"></a></td>
    <td><a href="news.html" onMouseover="imgOver('news')" onMouseout="imgOut('news')"><img src="images/news_up.gif" alt="News" name="news" border="0" id="news"></a></td>
    <td><a href="contacts.html" onMouseover="imgOver('contacts')" onMouseout="imgOut('contacts')"><img src="images/contacts_up.gif" alt="Contacts" name="contacts" border="0" id="contacts"></a></td>
  </tr>
</table></div>

</div>

The menu looks fine in IE6 and Firefox on a PC and Firefox on a Mac is positioned in correctly in Safari and IE on a Mac and is also positioned incorectly in IE7 on a PC.

My CSS code for the div's are as follows:

#menu {
    width: 570px;
    position:relative;
    top:108px;
    z-index: 3;
    left: 165px;
    display:inline;
    text-align:left;
    overflow: visible;
}

#masthead {
width: 760px;
height: 155px;
margin-top: 0px;
background-image: url(../images/masthead.jpg);
background-repeat: no-repeat;
background-position: center;
}

Can anyone help me with my postioning?

 
Old January 20th, 2007, 04:24 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 347
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Adam H-W
Default

I guess my question is 'How do you position a layer on top of another one and make it stay in the same position across browsers?

thanks

Adam



 
Old January 20th, 2007, 04:30 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

What in that code is supposed to be position where and on top of what?

--
http://yupapa.com
 
Old January 20th, 2007, 07:28 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 347
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Adam H-W
Default

Hi there, thanks for your response.

the menu is supposed to be positioned 108px from the top and 165px from the left and is on top of <div id="masthead>. I have given it a z-index of 3.

thanks

Adam








Similar Threads
Thread Thread Starter Forum Replies Last Post
Basic Positioning zach_1988 XSLT 4 December 1st, 2008 07:45 PM
form positioning jeremy1048 Access 2 February 12th, 2008 08:52 AM
Positioning Problem harpua CSS Cascading Style Sheets 5 May 27th, 2005 08:03 AM
fixed positioning mackknife BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 May 8th, 2005 10:37 AM
cursor positioning alihussein3 Javascript How-To 1 October 22nd, 2003 03:52 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.