...

View Full Version : Help with code please



Twisted01
03-13-2009, 01:12 PM
Hi, I am pretty much new here and in need of a little help from someone more expert than myself.
I can code basic HTML/XHTML and CSS and have done for quite some time, BUT for the life of me, I cannot figure out a problem that I am having between Firefox and IE.
Now, my code looks absolutely fine and just how I want it in Firefox (preferred browser), but in IE, it just doesn't sit right.
Here are the links to 2 pages with the issue on.

http://www.jays-creations.pwp.blueyonder.co.uk/incredimail.html
http://www.jays-creations.pwp.blueyonder.co.uk/psp.html

I have tried the list style first, but I couldn't get it to look like how it is "now" in Firefox, so I removed the list style. Now, it doesn't sit right in IE.

Please check out in Firefox (if you can) before IE to see what I mean.
I would like it how it is now in Firefox, so if anyone can recode it for me to show me where I have gone wrong, I sure would appreciate it.
I know what I am supposed to do, but for the life of cannot think how it should be coded for the desired effect.:confused:

Thank you for any help in advance.

Jay

abduraooft
03-13-2009, 01:25 PM
Check the compatibility of display:table; property at http://www.quirksmode.org/css/display.html

Twisted01
03-13-2009, 01:44 PM
OK, it appears that this type of layout is not supported by IE. Gee, back to the drawing board with the Unordered List again!!

Anyone willing to help me with this coding would be appreciated.:rolleyes:
Thank you to abduraooft for your incite. Much appreciated.

Jay

Fisher
03-13-2009, 01:58 PM
Try replacing this in your CSS:

.tablediv {
margin:0 auto;
width:455px;
height:42px;
background-color:#C9C9C9;
border:1px dotted #000;
}
.celldiv {
float:left;
width:84px;
background-color:#D6D6D6;
text-align:center;
color:#fff;
font: 12px Arial, "Trebuchet MS";
border:1px solid #808080;
margin:2px;
}
.celldiv a{
color:#808080;
}
.celldiv a:hover{
color:#000;
border-bottom:1px dotted #000000;
text-decoration:underline;
}

You might need to add a "clear:both" to class para1 too.

edit:nope, that's not going to work because I just realized that your 2nd page is different.
Get rid of all the divs and make that a ul instead. I'll find an example and post it.

Twisted01
03-13-2009, 02:25 PM
Yes, I noticed a slight difference in the 2, though not sure why (probably due to my lack of concentration LOL), but I do prefer the <ul> setup personally speaking (more control over it I think), but as stated, I couldn't get things to sit right.:rolleyes:
I sure do appreciate the help Fisher. Thanks for continuing with this for me.:thumbsup:

Jay

Fisher
03-13-2009, 02:29 PM
Okay, this isn't perfect, but try this method. Just swap out the relevant css and xhtml:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#tablediv {
margin:0 auto;
width:455px;
height:45px;
background-color:#C9C9C9;
border:1px dotted #000;
}
#tablediv ul {
display:inline;
list-style-type:none;
float:left;
}
#tablediv ul li {
width:84px;
float:left;
display:inline;
background-color:#D6D6D6;
color:#fff;
font: 12px Arial, "Trebuchet MS";
border:1px solid #808080;
margin-left:3px;
margin-top:3px;
text-align:center;
}
#tablediv ul li a {
text-decoration:none;
color:#000;
}
</style>
</head>
<body>
<div id="tablediv">
<ul>
<li><a href="animals.html"><b>ANIMALS</b></a></li>
<li><a href="christmas.html"><b>CHRISTMAS</b></a></li>
<li><a href="greetings.html"><b>GREETINGS</b></a></li>
<li><a href="halloween.html"><b>HALLOWEEN</b></a></li>
<li><a href="nighttime.html"><b>NIGHTTIME</b></a></li>
<li><a href="romance.html"><b>ROMANCE</b></a></li>
<li><a href="seasons.html"><b>SEASONS</b></a></li>
<li><a href="simple.html"><b>SIMPLE</b></a></li>
<li><a href="vectors.html"><b>VECTORS</b></a></li>
<li><a href="words.html"><b>WORDS</b></a></li>
</ul>
</div>
</div>
</body>
</html>

Twisted01
03-13-2009, 02:59 PM
OK, I have done as suggested. It is getting better this way, but a couple of things that need some attention.

If you check out the pages again, both in FF and IE, you will see how it looks.
Firstly, I would like 5 links on 1 line and the gaps left and right closing so as to make the box symmetrical all the way around, if you know what I mean. That should make it look ok in IE, BUT in FF is a different story LOL.

It does not actually sit in the box very much at all. How can this be fixed?:rolleyes:

Sorry to be a pain and appreciate your continued help.:thumbsup:

Jay

Fisher
03-13-2009, 03:42 PM
This will work fine in both FF and IE. The only thing that is messing it up is your body's font size of 76%. If you remove that, it works perfectly.


#tablediv {
border:1px dotted #000;
margin: 5px auto;
width: 455px;
background: #c9c9c9;
overflow:visible;
}
#tablediv ul {
display: inline;
list-style-type: none;
}
#tablediv ul li {
border: #808080 1px solid;
display: inline;
float: left;
font: 12px Arial, "Trebuchet MS";
width: 85px;
margin:2px;
color: #fff;
background: #d6d6d6;
text-align: center
height:45px;
}
#tablediv ul li a {
display:block;
color: #000;
text-decoration: none;
}

Twisted01
03-13-2009, 08:11 PM
Thanks my friend, much appreciated.
After a few tiny tweaks with your very helpful coding, I did tweak it slightly, changing overflow to hidden as it didn't quite sit within the <div id="tablediv"> in Firefox, but afterwards it looked just fine.
Now, in IE, it is just about there, but the line at the bottom has no padding as it does "equally" in FF. Any ideas?

I have tried, but I can't change it without messing up something else on the same browser or the other ! So, I "undid" until it was almost perfect.

Thanks again for your continued help and support.

Jay



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum