Hello all... I've made a revision of my site on my hard drive, making it for Firefox, and now I've gone to browser testing. However, I used tamed lists for the links, and EMs instead of PXs- all of it. And, it's a graphic heavy layout. So, there's problems, (most of which I've solved by using "property: for firefox em; _property: for ie em;". However, some remain.
1. There are unwanted gaps between the listed links in the navigation, I managed to bring them to a minmum with height: 0; for I.E they're still there.; they aren't there in FF.
2. I have the "#nav a img:hover ( width: 50%; height: 50%;}" to make the linking images enlarge when rolled over. However, this obviiously doesn't work in IE, but it causes the images to dissapear on mouse over. On FF, the images go behind other images and text, but enlarge correctly. I don't remember the CSS hack to make IE ignore a rule- something with a >, and I couldn't find it.. need a lot of help with this.
OK, this is on Apache, and I have dial up, so if you can't get on then it's probably because I'm not online. But, here's the link: <!-- m --><a class="postlink" href="http://127.0.0.1/index.php">http://127.0.0.1/index.php</a><!-- m --> . Thanks in advance
that's a network IPI was reduced to using the "hack" with the ">" twice on my latest layout. Until now I've been able to operate without such measures but alas no more as the crapness of IE overwhelms me.
Ah well, here it is:
html>body img:hover{
/* IE will ignore this */
}Originally posted by IncaWarrior
that's a network IP
That's the "localhost" IP.Thanks for the CSS hack, lavalamp.
Sorry- I didn't realize. The url:
<!-- m --><a class="postlink" href="http://69.64.99.80/index.php">http://69.64.99.80/index.php</a><!-- m -->
I used the wrong method to find it.Right, well I added in all the appropriate hacks for font-size, and also took out the height for the li's. Now, the img:hover works, and the page is back to how I want it on FF.
However, tthe list problem is still there.
I don't want the space in between the li's wtf is it there
Attached is the CSS file.. it's legnthy, but semantic &commented, so it shouldn't be too hard to figure out if you have the patience.
Thanks for the help so far
EDIT: Sorry for the first comment. I originally c/p'ed the file from my old style and never removed that, except for the url.Your running into Internet Explorer's block-level anchor tag inside an LI tag bug. You've got <A> tags set to display: block; inside <LI> tags. IE places a nearly irrepairable margin between the LI tags. You can use one of two fixes:
1) Set the display of the LI tags to inline. NOTE: I've never tried floating the LI tags left and setting them to 100% of their container's width. You could try a combination: set the display to inline, then float each LI with 100% width. Floated elements become block-level by default.
2) Set the top margin of each LI to -1.xem (that will depend on the font and font size). Then set the top padding for the UL to the same number of em's as your negative top margins for the LI tags.Ah, much better thanks. I should've realized it was due to a block level element inside of another block level element.. oh well. :-D
Note: The only reason the images were being messed up was because I had set height for a elements. Now, I don't need to do that, so it works how I want it to. Thx again
1. There are unwanted gaps between the listed links in the navigation, I managed to bring them to a minmum with height: 0; for I.E they're still there.; they aren't there in FF.
2. I have the "#nav a img:hover ( width: 50%; height: 50%;}" to make the linking images enlarge when rolled over. However, this obviiously doesn't work in IE, but it causes the images to dissapear on mouse over. On FF, the images go behind other images and text, but enlarge correctly. I don't remember the CSS hack to make IE ignore a rule- something with a >, and I couldn't find it.. need a lot of help with this.
OK, this is on Apache, and I have dial up, so if you can't get on then it's probably because I'm not online. But, here's the link: <!-- m --><a class="postlink" href="http://127.0.0.1/index.php">http://127.0.0.1/index.php</a><!-- m --> . Thanks in advance
that's a network IPI was reduced to using the "hack" with the ">" twice on my latest layout. Until now I've been able to operate without such measures but alas no more as the crapness of IE overwhelms me.Ah well, here it is:
html>body img:hover{
/* IE will ignore this */
}Originally posted by IncaWarrior
that's a network IP
That's the "localhost" IP.Thanks for the CSS hack, lavalamp.
Sorry- I didn't realize. The url:
<!-- m --><a class="postlink" href="http://69.64.99.80/index.php">http://69.64.99.80/index.php</a><!-- m -->
I used the wrong method to find it.Right, well I added in all the appropriate hacks for font-size, and also took out the height for the li's. Now, the img:hover works, and the page is back to how I want it on FF.
However, tthe list problem is still there.
I don't want the space in between the li's wtf is it there
Attached is the CSS file.. it's legnthy, but semantic &commented, so it shouldn't be too hard to figure out if you have the patience.
Thanks for the help so far
EDIT: Sorry for the first comment. I originally c/p'ed the file from my old style and never removed that, except for the url.Your running into Internet Explorer's block-level anchor tag inside an LI tag bug. You've got <A> tags set to display: block; inside <LI> tags. IE places a nearly irrepairable margin between the LI tags. You can use one of two fixes:
1) Set the display of the LI tags to inline. NOTE: I've never tried floating the LI tags left and setting them to 100% of their container's width. You could try a combination: set the display to inline, then float each LI with 100% width. Floated elements become block-level by default.
2) Set the top margin of each LI to -1.xem (that will depend on the font and font size). Then set the top padding for the UL to the same number of em's as your negative top margins for the LI tags.Ah, much better thanks. I should've realized it was due to a block level element inside of another block level element.. oh well. :-D
Note: The only reason the images were being messed up was because I had set height for a elements. Now, I don't need to do that, so it works how I want it to. Thx again