Please Help! CSS code phantom image issues

[vroni357]

Hi,

I'm having a problem with browser differences and images that aren't supposed to be there.

In part of my design I have a pearl graphic on every page with this code in the CSS: #headerPan #pearllinks ul {list-style-type:none; padding:0px; margin:0px; line-height:200%;}#headerPan #pearllinks li a:link,a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#headerPan #pearllinks ul li a:link,a:visited{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:60px; text-decoration:none; text-transform:capitalize;}#headerPan #pearllinks ul li a:hover{background-image: url(graphics/gray_pearl_30x26.gif); background-repeat:no-repeat; background-position:0px 0px; background-color:#ffffff; color:#f1d9d9; text-decoration:none;} And this works fine.

On one page I have a regular html table not a CSS table with links using this code in the CSS: #bodyPan #mytablelinks p a:link,a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#bodyPan #mytablelinks p a:link,a:visited{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:40px; text-decoration:none; text-transform:capitalize;}#bodyPan #mytablelinks p a:hover{background-image: url(graphics/gray_pearl_30x26.gif); background-repeat:no-repeat; background-position:0px 0px; background-color:#ffffff; color:#f1d9d9; text-decoration:none;} And this works fine.

But on another page I have a regular html table not a CSS table with links using this code in the CSS: #bodyPan #retailtablelinks p a:link{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; text-align:center; text-decoration:none; text-transform:capitalize;}#bodyPan #retailtablelinks p a:visited{color:#c0c0c0;}#bodyPan #retailtablelinks p a:hover{color:#f1d9d9; text-decoration:underline;}

This works fine in Firefox 24 but in Internet Explorer 8 the pearl graphic shows even though it's not supposed to be there.

These 3 codes are all the CSS code that I have with a pearl graphic in it on the whole site so I'm wondering if the problem is coming from one of the working codes even though it works fine for where I want the pearl graphic or is this just an Internet Explorer 8 issue and there's no way for me to get rid of the phantom pearl graphic no matter what I do? I'm not very good with CSS and this is frustrating to me, can someone please help me and tell me where I've gone wrong and how to fix it? Thank you so much in advance.

[davej]

This is difficult to interpret. Could you perhaps post a link to this webpage? The ideal situation is a link to the webpage and an image file showing how you want it to look (if the problem isn't totally obvious).

[vroni357]

Hi,

Thank you so much for replying. This site is not online yet, I'm still working on it. I originally tried to attach the 2 screenshots of the web pages in Firefox 24 and Internet Explorer 8 as .jpg images as well as the whole style sheet to this reply but this site would not allow me to do that even though there is a file uploader. So then I tried to copy and paste the 2 images directly into the reply but I was not allowed to do that either, I got messages like "You are not allowed to use that image extension on this community." But I could copy and paste the whole style sheet below and I'm hoping that would help at least a little. If it would also help to have more information like the html from the page then please let me know.

Since it's not online and I can't provide a link I thought it would also help to tell you what the links on the page are supposed to do. The navigation bar across the top (Home, About Us, Collections, Retail and Contact Us) are all dark gray and turn pink on mouse over. The navigation bar on the left with the pearl graphics (My Necklaces, My Bracelets, My Earrings and My Odds and Ends) are all dark gray with a pink pearl and turn pink with a gray pearl on mouse over. All these are on every page.

Below that is the problem on one page. There are links above jewelry graphics (Retail Necklaces, Retail Bracelets, Retail Earrings and Retail Rings) they are all dark gray without an underline and should not have a pearl graphic at all and turn pink with an underline on mouse over. After they have been visited they are all light gray without an underline and should not have a pearl graphic at all and turn pink with an underline on mouse over. The difference is in the Firefox version it looks as I describe it. But in the Internet Explorer version where I describe it should not have a pearl graphic at all there's a pearl graphic. I can't figure out why or where it's coming from or how to get rid of it. Thank you so much for helping me.

Style Sheet:

html{scrollbar-face-color: #f1d9d9;scrollbar-shadow-color: #808080;scrollbar-highlight-color: silver;scrollbar-3dlight-color: #800000;scrollbar-darkshadow-color: #808080;scrollbar-track-color: #c0c0c0;scrollbar-arrow-color: white;}/* CSS Document */body{padding:0; margin:0; background:url(images/main-bg.gif) 0 0 repeat-x #ffffff; font:18px Arial, Helvetica, sans-serif; color:#808080; font-weight:normal;}div, p, h1, h2, h3, ul, img{padding:0px; margin:0px;}ul{list-style-type:none;}/* TOP PANEL *//* topPan = Left Side Links: Change height to move left side links box up */#topPan{width:778px; height:130px; position:relative; margin:0 auto; padding:0;}#topPan img{width:204px; height:130px; display:block; padding:23px 0 0 6px;}/* Menu Panel */#topPan ul{width:520px; height:96px; display:block; position:absolute; top:0px; right:9px; margin:0; padding:0;}#topPan ul li{float:left; width:104px; display:block; text-align:center;}#topPan ul li a{width:104px; height:35px; display:block; font:20px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#808080; line-height:14px; background:url(images/menu-bg.gif) 0 0 repeat-x #808080; text-decoration:none; margin:0; padding:61px 0 0 0; }#topPan ul li a:hover{ width:104px; height:96px; display:block; background:#ffffff; color:#f1d9d9; text-decoration:none;}#topPan ul li span{width:104px; height:35px; display:block; background:url(images/menu-devider1.gif) 100% 0 no-repeat #ffffff; color:#808080; line-height:14px; text-decoration:none; padding:61px 0 0 0;}/* /TOP PANEL *//* HEADER PANEL *//* headerPanleft = Left Side Links *//* headerPan = Main Right Side: Change height to move main body up or down (Change height to 175px if a link on the left is deleted or 210px if not) *//* headerPan h1 = Main Right Side Links: Change top to move right side h1 up (Change height to 125px if a link on the left is deleted or 160px if not) */#headerPan{width:778px; height:210px; position:relative; margin:0 auto; padding:0;}#headerPan h1{width:526px; height:160px; position:absolute; top:20px; right:0px; background:#ffffff url('graphics/header-img18_525x160_w_photos.jpg') no-repeat 0 0; color:#fff; font-size:36px; line-height:18px; text-transform:uppercase; text-indent:-2000px}#headerPanleft{ width:237px; height:auto; position:absolute; top:40px; left:9px;}/* #headerPan #pearllinks = Pink Pearl Links: Pink pearl links and text on the left of every page. Change padding-left:60px to whatever px to move the pearl closer or farther from the text */#headerPan #pearllinks ul {list-style-type:none; padding:0px; margin:0px; line-height:200%;}#headerPan #pearllinks li a:link,a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#headerPan #pearllinks ul li a:link,a:visited{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:60px; text-decoration:none; text-transform:capitalize;}#headerPan #pearllinks ul li a:hover{background-image: url(graphics/gray_pearl_30x26.gif); background-repeat:no-repeat; background-position:0px 0px; background-color:#ffffff; color:#f1d9d9; text-decoration:none;}/* BODY PANEL */#bodyPan{width:778px; height:auto; position:relative; margin:0 auto; padding:0;}/*Left Panel */#leftPan{width:239px; height:611px; position:absolute; top:0px; left:8px; margin:0; padding:0px;}#leftPan h3{height:48px; background:#ffffff; display:block; float:right; padding:0 0 0 57px; margin:12px 0 22px 13px; font:28px Georgia, "Times New Roman", Times, serif; color:#808080; line-height:48px;}#leftPan ul{ display:block; float:right; width:150px; height:327px;}#leftPan ul li{background:url(images/arrow3.gif) 140px 10px no-repeat; padding:0px 20px 0 0; text-align:right;}#leftPan ul li a{text-decoration:underline; color:#808080; background:#ffffff;}#leftPan ul li a:hover{text-decoration:none;}/*/Left Panel *//*Right Panel */#rightPan{width:504px; height:600px; position:absolute; top:0px; right:10px; border:1px solid #000000; background:#fff; color:#ffffff;}#rightbodyPan{width:484px; height:580px; position:absolute; top:10px; left:10px; background:#ffffff; color:#808080;}#rightbodyPan h2{width:266px; height:31px; display:block; position: relative; background:url(images/symbol5.gif) 100% 0 no-repeat #ffffff; padding:24px 0 0 0; font:28px Georgia, "Times New Roman", Times, serif; color:#808080; line-height:28px; margin:20px 0 20px 80px ;}#rightbodyPan p{padding:0 80px 30px;}#rightbodyPan p.redtext{background:#ffffff; color:#c0c0c0; font-size:18px; line-height:20px; padding:0 80px 26px;}#rightbodyPan p span{background:#ffffff; color:#808080;}#rightbodymore{width:306px; height:25px; border:1px solid #fff; background:#c0c0c0; display:block; padding:2px; margin:0 60px 0 80px; font-size:12px; color:#ffffff; line-height:25px; font-weight:bold;}#rightbodymore p.textposition{float:left; padding:0 0 0 20px; margin:0;}#rightbodymore a{float:right; background:url(images/arrow4.gif) no-repeat 58px 1px #808080; width:66px; display:block; position:relative; margin:1px 0 0 0; padding:0 0 0 10px; height:23px; text-decoration:none; color:#fff; font:14px "Trebuchet MS",Arial, Helvetica, sans-serif; line-height:23px; text-transform:uppercase;}#rightbodymore a:hover{background:url(images/arrow4.gif) no-repeat 58px 1px #808080; text-decoration:none; color:#fff;}#rightbodyPan h3{width:268px; height:31px; display:block; position: relative; background:url(images/symbol6.gif) 100% 0 no-repeat #ffffff; padding:24px 0 0 0; font:28px Georgia, "Times New Roman", Times, serif; color:#808080; line-height:28px; margin:27px 0 20px 80px ;}#rightbodyPan ul{width:328px; height:92px; position:relative; top:5px; left:80px; margin:0 0 30px 0;}#rightbodyPan li{width:340px; background:url(images/arrow2.gif) 0 7px no-repeat; font:14px Arial, Helvetica, sans-serif; line-height:24px; padding:0 0 0 20px;}#rightbodyPan li a{width:235px; height:60px; background:#ffffff; color:#c0c0c0; text-decoration:underline; line-height:24px;}#rightbodyPan ul li a:hover{width:235px; height:60px; text-decoration:none; line-height:24px;}#rightbodymorenext{width:306px; height:25px; border:1px solid #fff; background:#c0c0c0; display:block; padding:2px; margin:0 60px 0 80px; font-size:12px; color:#ffffff; line-height:25px; font-weight:bold;}#rightbodymorenext p.textposition{float:left; padding:0 0 0 20px; margin:0;}#rightbodymorenext a{float:right; background:url(images/arrow4.gif) no-repeat 58px 1px #808080; width:66px; display:block; position:relative; margin:1px 0 0 0; padding:0 0 0 10px; height:23px; text-decoration:none; color:#fff; font:14px "Trebuchet MS",Arial, Helvetica, sans-serif; line-height:23px; text-transform:uppercase;}#rightbodymorenext a:hover{background:url(images/arrow4.gif) no-repeat 58px 1px #808080; text-decoration:none; color:#fff;}/* bodyPan #mytablelinks = My table Links: Text links in the table on the My Collections page only. Change padding-left:60px to whatever px to move the pearl closer or farther from the text */#bodyPan #mytablelinks p a:link,a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#bodyPan #mytablelinks p a:link,a:visited{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:40px; text-decoration:none; text-transform:capitalize;}#bodyPan #mytablelinks p a:hover{background-image: url(graphics/gray_pearl_30x26.gif); background-repeat:no-repeat; background-position:0px 0px; background-color:#ffffff; color:#f1d9d9; text-decoration:none;}/* bodyPan #retailtablelinks = Retail table Links: Text links in the table on the Retail page only. */#bodyPan #retailtablelinks p a:link{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; text-align:center; text-decoration:none; text-transform:capitalize;}#bodyPan #retailtablelinks p a:visited{color:#c0c0c0;}#bodyPan #retailtablelinks p a:hover{color:#f1d9d9; text-decoration:underline;}/* /BODY PANEL *//* FOOTER PANEL *//* footerPan ul = Footer Links Area: Change right to move links area left */#footerPan{width:778px; height:231px; position:relative; margin:0 auto; padding:0;}#footernextPan{width:761px; height:150px; position:absolute; top:0px; right:10px; background:#808080; color:#fff; margin:0;}#footerPan ul{width:475px; display:block; position:absolute; right:53px; top:33px; }#footerPan li{float:left; font:16px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}#footerPan ul li a{padding:0 10px; color:#c0c0c0; background:#808080; text-decoration:none;}#footerPan ul li a:visited {font:16px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal; color:#f1d9d9;}#footerPan ul li a:hover{text-decoration:underline;}#footerPan ul li a.padl{padding:0 0 0 14px;}/* footerPan p = Copyright Area: Change top to move copyright area up */#footerPan p{ background:#808080; margin:55px 45px 0 0; display:block; position:absolute; top:10px; right:47px; color:#ffffff; font:14px "Trebuchet MS",Arial, Helvetica, sans-serif; line-height:15px;}/* footerPan ul.copyright = Copyright Area: Change top to move copyright area up */#footerPan ul.copyright{ background:#808080; margin:55px 45px 0 0; display:block; position:absolute; top:10px; right:0px; color:#ffffff; font:14px "Trebuchet MS",Arial, Helvetica, sans-serif; line-height:15px;}#footerPan ul.copyright li a{padding:0 3px; color:#c0c0c0; background:#808080; text-decoration:none;}#footerPan ul.copyright li a:visited {color:#f1d9d9;}#footerPan ul.copyright li a:hover{text-decoration:underline;}#footerPan ul.terms{width:190px; background:#808080; color:#fff; display:block; position:absolute; top:110px; right:50px;}#footerPan ul.terms li a{background:#808080; display:block; color:#c0c0c0; line-height:20px; text-decoration:none;}#footerPan ul.terms li a:visited {color:#f1d9d9;}#footerPan ul.terms li a:hover{text-decoration:underline;}/* THE END */

[dsonesuk]

Its difficult to understand what is going on without actually seeing the problem in some way, but i don't know if this is the problem but you do know that for example

 

#headerPan #pearllinks li a:link

 

from

 

#headerPan #pearllinks li a:link, a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}

 

targets links with parents #headerPan #pearllinks li

 

While

 

a:visited

 

on the same line WILL target ALL anchor links

 

to restrict it to the same links you would have to use

 

#headerPan #pearllinks li a:visited

 

as in

 

#headerPan #pearllinks li a:link, #headerPan #pearllinks li a:visited {background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}

[vroni357]

Hi,

Thank you so much for replying. I did not realize that the way I had the CSS written would target links other than what I intended to be targeted. Thank you for that. I did change the code to the one you have in your reply. Then I changed it again to something a little easier for me to work with and I hope that's ok and has the same effect as in your reply:

/* #headerPan #pearllinks = Pink Pearl Links: Pink pearl links and text on the left of every page. Change padding-left:60px to whatever px to move the pearl closer or farther from the text */#headerPan #pearllinks ul {list-style-type:none; padding:0px; margin:0px; line-height:200%;}#headerPan #pearllinks ul li a:link{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#headerPan #pearllinks ul li a:link{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:60px; text-decoration:none; text-transform:capitalize;}#headerPan #pearllinks ul li a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#headerPan #pearllinks ul li a:visited{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:60px; text-decoration:none; text-transform:capitalize;}#headerPan #pearllinks ul li a:hover{background-image: url(graphics/gray_pearl_30x26.gif); background-repeat:no-repeat; background-position:0px 0px; background-color:#ffffff; color:#f1d9d9; text-decoration:none;}

Changing that code did not, however, affect the phantom pearl graphic that I'm trying to get rid of. And I do understand that it's a problem that is difficult to diagnose without seeing the web page. I just don't know what else to do at this point. Thank you so much for helping me.

 

[vroni357]

Hi,

Update: Yesterday I replied to dsonesuk that "Changing that code did not, however, affect the phantom pearl graphic that I'm trying to get rid of." but I had forgotten to change the following code which I did today:

/* bodyPan #mytablelinks = My table Links: Text links in the table on the My Collections page only. Change padding-left:60px to whatever px to move the pearl closer or farther from the text */#bodyPan #mytablelinks p a:link,a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#bodyPan #mytablelinks p a:link,a:visited{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:40px; text-decoration:none; text-transform:capitalize;}#bodyPan #mytablelinks p a:hover{background-image: url(graphics/gray_pearl_30x26.gif); background-repeat:no-repeat; background-position:0px 0px; background-color:#ffffff; color:#f1d9d9; text-decoration:none;}Changed to:

/* bodyPan #mytablelinks = My table Links: Text links in the table on the My Collections page only. Change padding-left:60px to whatever px to move the pearl closer or farther from the text */#bodyPan #mytablelinks p a:link{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#bodyPan #mytablelinks p a:link{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:40px; text-decoration:none; text-transform:capitalize;}#bodyPan #mytablelinks p a:visited{background-image: url(graphics/dark_pink_pearl_32x26.gif); background-repeat:no-repeat; background-position:0px 0px;}#bodyPan #mytablelinks p a:visited{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; background-color:#ffffff; padding-left:40px; text-decoration:none; text-transform:capitalize;}#bodyPan #mytablelinks p a:hover{background-image: url(graphics/gray_pearl_30x26.gif); background-repeat:no-repeat; background-position:0px 0px; background-color:#ffffff; color:#f1d9d9; text-decoration:none;}

Changing that code did affect the phantom pearl graphic that I was trying to get rid of which is now gone. I do have an underline of the text in the Internet Explorer 8 version that's not supposed to be there but that is so much easier for me to deal with than the phantom pearl graphic. Thank you so so much for helping me.

[vroni357]

Hi,

Another update: In my previous post I wrote "I do have an underline of the text in the Internet Explorer 8 version that's not supposed to be there but that is so much easier for me to deal with than the phantom pearl graphic." I've now fixed that. That was just something small that I missed adding to the code so that has been changed:

/* bodyPan #retailtablelinks = Retail table Links: Text links in the table on the Retail page only. */#bodyPan #retailtablelinks p a:link{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; text-align:center; text-decoration:none; text-transform:capitalize;}#bodyPan #retailtablelinks p a:visited{color:#c0c0c0;}#bodyPan #retailtablelinks p a:hover{color:#f1d9d9; text-decoration:underline;}

Changed to:

/* bodyPan #retailtablelinks = Retail table Links: Text links in the table on the Retail page only. */#bodyPan #retailtablelinks p a:link{font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; text-align:center; text-decoration:none; text-transform:capitalize;}#bodyPan #retailtablelinks p a:visited{color:#c0c0c0; text-decoration:none;}#bodyPan #retailtablelinks p a:hover{color:#f1d9d9; text-decoration:underline;}

Thank you so so much for helping me.

[dsonesuk]

you are doubling your css set default for link

#bodyPan #retailtablelinks p a {font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#808080; text-align:center; text-decoration:none; text-transform:capitalize;}

you only add to pseudo class what changes from default

#bodyPan #retailtablelinks p a:visited{color:#c0c0c0;}#bodyPan #retailtablelinks p a:hover{color:#f1d9d9; text-decoration:underline;}

IF font-family is the same throughout page, or links by default with no underline

body {font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;}a {text-decoration:none;}#bodyPan #retailtablelinks p a {font-size:18px; font-weight:normal; color:#808080; text-align:center; text-transform:capitalize;}#bodyPan #retailtablelinks p a:visited{color:#c0c0c0;}#bodyPan #retailtablelinks p a:hover{color:#f1d9d9; text-decoration:underline;}

Edited October 26, 2013 by dsonesuk

[vroni357]

Hi,

Thank you so much for replying again. I did not realize that, obviously I'm not very good with CSS. Since it's working the way I have it is it alright to leave it that way or should I change something now because it might cause problems later? Below is my default and the only things that I've noticed that are the same are the font values or am I missing something?:

/* CSS Document */body{padding:0; margin:0; background:url(images/main-bg.gif) 0 0 repeat-x #ffffff; font:18px Arial, Helvetica, sans-serif; color:#808080; font-weight:normal;}div, p, h1, h2, h3, ul, img{padding:0px; margin:0px;}ul{list-style-type:none;}

Thank you so so much for helping me.

[dsonesuk]

The only problem is that it is not very efficient, and you are creating css file size larger than it should be, and in doing so it takes a bit extra time/bandwidth to load.

 

I think you maybe bit over keen to apply id ref in all you selectors, where the class name could suffice, the only time i would use so many id references, is when i need to give precedence to styling over a already defined default template style id reference.

[vroni357]

Hi,

Thank you so much for replying again. At one point when I was trying to fix the problem I had with the pearl graphic I did have the #bodyPan #mytablelinks p a: written as, if I remember correctly, #bodyPan #mytablelinks p.pearl a: or something along that line which I figured out was not correct since it did not work correctly so I could not figure out how else to do it. Would something like #bodyPan_mytablelinks p.pearl a: be better to use or is that still incorrect? And if so, what would be better to use? Thank you so so much for helping me.

[Ingolme]

Removing the #bodyPan part altogether would still work. Since IDs are unique, #mytablelinks can only possibly refer to one element regardless of what ancestor it has. Unless you have more elements with classname "pearl" that need to be styled differently, #mytablelinks isn't really necessary either.

 

p.pearl on its own will select all the <p> elements with class="pearl".

[vroni357]

Hi,

Thank you so much for replying. Oh, I did not realize that. Well that makes things so much easier. Thank you so so much for helping me.

[vroni357]

Hi,

Update: My inefficient and ID reference heavy code has been changed:

CSS changed from: #headerPan #pearllinks ul

With HTML:

<div id="headerPan"> <div id="headerPanleft"> <div id="pearllinks"> <ul> <li><a href="mynecklaces.html">My Necklaces</a></li> </ul> </div> </div>

CSS changed to: #headerPan ul.pearllinks

With HTML:

<div id="headerPan"> <div id="headerPanleft"> <ul class="pearllinks"> <li><a href="mynecklaces.html">My Necklaces</a></li> </ul> </div>

___________________________________________________________________

CSS changed from: #bodyPan #mytablelinks p

CSS changed to: #bodyPan p.mytablelinks

With HTML:

<p class="mytablelinks"><a href="mynecklaces.html">My Necklaces</a></p>

____________________________________________________________________

CSS changed from: #bodyPan #retailtablelinks p

CSS changed to: #bodyPan p.retailtablelinks

With HTML:

<p class="retailtablelinks"><a href="retailnecklaces.html">Retail Necklaces</a></p>

 

I assume I did it correctly since it works and I hope this is a more efficient and generally better way to work the code. Thank you so so much for helping me.

[dsonesuk]

You can lose the #bodyPan selector as well.

[vroni357]

Hi,

Thank you so much for replying again. I kept the #bodyPan selector just to keep my own self straight about the part of the page I'm working in and for consistency because the rest of the code is written in a similar manner. Since it's working correctly is it alright to keep it that way? BTW: Changing from the ID references to the Class, as I have it now, also solved a space issue in Internet Explorer that I had not even mentioned before. Thank you so so much for helping me.

Edited October 28, 2013 by vroni357