Navigation in IE help |
 Jul 5 2009, 04:02 PM
Post
#1
|
|
 Senior Member  Group: Member Posts: 52 Joined: Jan 2007 Member No: 495,596  |
My site www.kaphotoonline.com works fine on my mac but when I visit the site using a PC on internet explorer, all the links are way off.
I know I did the navigation really goofy, but that was the only way that i could get it to work. I need to figure out some way to get it to work in IE. If some one could help me with a new navigation or anything, I would appreciate it. Heres my coding for the about-contact pages: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> <head> <title>ka|photo about</title> <style type="text/css"> body { padding-left: 11em; color: purple; background-color: #000000; background-image: url("http://i631.photobucket.com/albums/uu40/kaphotoonline/about.jpg"); background-position: 50% 50%; background-repeat: no-repeat; } #navi { width: 600px; margin-left: 80px; margin-top: 228px; padding: 1px; } ul.navbar li { background: transparent; margin: 13em 0; padding: 6em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: transparent } a:visited { color: transparent } </style> </head> <body> <p><!-- Navigation --></p> <div id="navi"> <div><a href="index.html" class="nav">home</a> <a href="about.html" class="nav">about</a> <a href="gallery.html" class="nav">gallery</a> <a href="pricing.html" class="nav">pricing</a> <a href="contact.html" class="nav">contact</a></div> <p><!-- Main content --></p> <h1></h1> <p> </p> <p> </p> <p><!-- Sign and date the page, it's only polite! --></p> <address><br /> </address> <p> </p> <p> </p> <p> </p> <p> </p> </div> </body> </html>
Reason for edit: Use codeboxes for longer codes. Thanks. - Gabi :)
|
|
|
|
 |
Replies
|
Jul 6 2009, 01:51 PM
Post
#2
|
|
 Treasure Pleasure Group: Head Staff Posts: 11,193 Joined: Oct 2005 Member No: 281,127 |
Ah, so you're positioning links over designated spots? Never mind then. Sorry to disappoint you but they don't match up in Firefox either. I suggest just slicing your layout into small images so you can link certain bits individually. That or, you can center everything so no matter what browser or resolution viewers use, it will still match up. To do this, you must position objects like so:
CODE position:absolute; top:50%; margin-top:#px; left:50%; margin-left:#px; You'll need to replace the first pound symbol with half the height of whatever you're positioning. For example, if the height of a certain DIV is 600px, you should put in 300px. Then replace the second symbol with half the width of what you're trying to move around. You must do this for the DIV your links are contained in. In addition, you must put the layout image into a DIV and do the same with it. Setting it as your background will only make it harder for you to achieve the look you're going for. Hope that wasn't confusing. |
|
|
|
|
Jul 11 2009, 06:02 PM
Post
#3
|
|
|
Senior Member Group: Member Posts: 52 Joined: Jan 2007 Member No: 495,596 |
So, once I slice my layout image, where at in my style sheet would I place the table coding?
|
|
|
|
Posts in this topic
kariiissa Navigation in IE help Jul 5 2009, 04:02 PM
fixtatik CODEul.navbar li {
background: transparent;
ma... Jul 5 2009, 07:30 PM kariiissa i cant really use a list i don't think, i need... Jul 6 2009, 12:54 PM
fixtatik QUOTE(kariiissa @ Jul 6 2009, 01:54 PM) i... Jul 6 2009, 07:18 PM kariiissa Really? So in Internet Explorer all the links matc... Jul 6 2009, 01:35 PM kariiissa oh okay, I get what your saying but yet its so con... Jul 11 2009, 06:09 PM kariiissa okay, one last question. I have the slices done an... Jul 11 2009, 06:55 PM Mikeplyts You need to have your Table code in between your ... Jul 12 2009, 04:14 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: