Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

Website Design Forum


You are currently viewing our Website Design Forum as a guest. Please register to participate.
Login



Freelance Jobs

Reply
Old 07-15-2006, 09:28 AM IE problems
Novice Talker

Posts: 5
Name: Brett
Location: germany but from canada
Trades: 0
Hey, for my new website I've been programing in wordpad, then viewing it in mozilla, then when I'm done it's all messed up in internet explorer, (big suprise).
I've managed to fix some problems, but some I just can't figure out and it's annoying. I was wondering if anyone could take a quick look at my code and try and fix a few problems:
  • In IE the menu has too much space inbetween each link, when I change it to look better, then in Mozilla it becomes too little space.
  • In IE the links when hovered upon do not show the background image
  • In IE The indent of the first paragraph is twice that of the one in mozilla.
  • In IE having trouble getting the first header in the body to look as though it is the first two words in the paragraph.
Thanks, I took almost two years of webdesigning so my skills are still a bit rusty. please don't spend too much time on it, I'm sure a lot of you have seen most of this before. Here is the location of my site (soon to be moved):
http://myatheism.awardspace.com/index.html
and here is the code for my style sheet:

*
{
margin: 0px;
padding: 0px;
}

/* TOP OF PAGE */

body
{
background-image: url('images/a1.gif');
background-repeat: repeat-x;
background-color: white;
font-family: verdana;
font-size: 75%
}

div#header h1
{
font-family: "trebuchet ms", helvetica, sans-serif;
font-size: 39px;
}
h1 span#blue
{
color: white;
}

div#header
{
position: absolute;
left: 10%;
top: 45px;
letter-spacing: -2px;
color: #DADADA;
text-transform: lowercase;
}

#slogan
{
position: absolute;
right: 10%;
top: 65px;
color: #DADADA;
text-transform: lowercase;
font-size: 13px;
font-family: "trebuchet ms", helvetica, sans-serif;
}

/* MIDDLE */

div#menu
{
color: #636363;
font-size: 115%;
background-color: white;
position: absolute;
left: 6%;
top: 130px;
right: 75%;
padding-bottom: 15%;
padding-top: 1.5%;
padding-left: 3%;
line-height: 200%;
}

div#body
{
background-color: white;
position: absolute;
left: 29%;
right: 5%;
top: 135px;
padding-bottom: 15%;
padding-top: 3%;
padding-left: 3%;
padding-right: 10%;
line-height: 125%;
}

/* LINKS */
#menu a
{
display: block;
padding-left: 2%;
}


A:link
{
text-decoration: none;
font-weight: bold;
color: #636363;
}
A:visited
{
text-decoration: none;
font-weight: bold;
color: #636363;
}
A:hover
{
background-image: url('images/bbg1.gif');
background-repeat: repeat-x;
}
A:active
{
color: #FFFF00
}

/* LISTS */

div#menu ul
{
list-style-type: none;
}

div#body p
{
text-indent: 5%;
}

div#intro h1
{
font-size: 200%;
padding: 0;

position: absolute;
top: 6.5%;
}

div#body div#intro p#first
{
text-indent: 26%;
margin-top: 3%;
}

div#body div#intro p
{
margin-top: 0.5%;
}

div#body h1, h2, h3, h4, h5, h6
{
font-family: "trebuchet ms", helvetica, sans-serif;
color: #50514D;
line-height: 125%;
}

div#body span#green
{
color: #85AC1E;
}



div#weekly_joke
{
background-image: url("images/a4.gif");
background-repeat: repeat-x;
margin-top: 3%;
padding-left: 1%;
padding-right: 1%;
margin-left: -2%;
border: dashed 1.5px #dadada;
}


div#weekly_joke p
{
padding: 0;
margin: 0;
}
tupixel is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 07-15-2006, 05:59 PM Re: IE problems
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Ok, for one thing you don't need, nor do you want, everything absolutely positioned. That means that everything is removed from the document flow. I can do your layout with no absolutes and just use the doc flow and floats.

Wrap the entire thing in a wrapper <div> and make it position: relative. Then you can position the menu and content area relative to the wrapper.

To fix the bg on hover problem, change the rule as follows:
A:hover
{
background: url(images/bbg1.gif) repeat-x;

For lists, IE uses margins, FF uses padding, so you will have to do both and adjust accordingly.

You've got id="weekly_joke" used TWICE .. can't do that. ID's are UNIQUE. If you want to use it more than once, make a class.

You might want to read about all the IE bugs here:
http://www.positioniseverything.net/ie-primer.html
http://www.positioniseverything.net/explorer.html
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to IE problems
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.21498 seconds with 12 queries