CSS - Issues With Link Colorization

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

http://www.plsx.com

Two things.

The main menu on the left has dots as the background. As you can see on the submenus, I managed to make it so the words themselves have a white background and thus the dots don't start until AFTER the words. Just click on publishing services to see what I mean. I can't seem to figure out why I can't get it to work on the main menu. Remember, the roll overs must still work.

I need the site looking good in all 3 major browsers, Opera, Firefox and IE. If you look at it with IE, that is the way it should be working...I need the CSS changes to make them as compatible as possible.

So...

For each problem, I will paypal you $25. I don't know if this is against site rules, if it is, I apologize and please move it to whatever section it should be in. Hopefully this is easy sleazy stuff!

Thanks in advance guys! I always come here looking for help and people give it happily, I just thought I might as well offer a reward for their help!

Hi There,

I have coded this layout in CSS and have it looking correct in Firefox.

http://www.tuxdiscs.com/SE/

I realise that it is far from perfect in IE due to margins and padding. Is there an easy way to define alternative margins and padding for ie (other than having a separate style sheet)?

Thanks,

Vince

Ok, this is my last chance at solving this problem.

I've created my site using CSS and XHTML, working fine in all the PC browsers I can find, but for some reason it is a different story on a Mac, especially IE.

It seems the left hand column of my site spreads across the full width, knocking the right frame down below it. I've looked and looked at my CSS code and I can't see what might be causing the problem.

My site is here, my CSS and XHTML is valid, although I have removed one CSS file due to problems so that is nothing to worry about.

If anyone can help, pref if you have a Mac, I would be so greatful.

hello all,
I am stuck on few things here. I want to make the following changes and I tried fixing them several times but could not succeed.

1. quantity input align right at the center.
2. remove button v-align at the bottom of the total1 div tag, centered.
4. subtotal text positioned on same vertical line with Qty.
3. update button position 50px left side of subtotal text.


I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong.

http://www.refinethetaste.com/html/content/basket/basket.htm


Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .desc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .weight	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .price	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .qty	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .total	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .desc1 { float: left; width:274px; height:80px; margin:3px; padding:3px;  }
#basket .basket .weight1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .price1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; margin:3px; padding:3px;  }
#basket .basket .qty1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .total1	{ float: left; width:60px; height:80px; text-align: center; font-weight:bold; font-size:14px; color:#716759; margin:3px; padding:3px;  }
#basket .basket .remove	{ float: left; width:574px; height:15px; border-bottom: #ece7d1 1px dotted;   }
#basket .basket .subtotal { float: left; width:504px; text-align:right; font-weight:bold; font-size:14px; border-right: #ece7d1 1px dotted; margin:10px 0 10px 0;   }
#basket .basket .subtotalint { float: left; width:60px; text-align:center; font-weight:bold; font-size:14px; border-bottom: #ece7d1 1px dotted; margin:10px 0 10px 0;}


#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#update { float:right; width: 48px; height: 15px; padding-right:150px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
        <h1>Create a New Account</h1>
        To take full advantage of your Williams-Sonoma account, please provide all the information below.
        <div class="hline"></div>
        <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" /> 
    	<div class="basket">
            <div class="desc">Product Description</div>
            <div class="weight">Weight</div>
            <div class="price">Price</div>
            <div class="qty">Qty</div>
            <div class="total">Total</div>
            
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a>
                    <br />
                    
                </div>
                <div class="weight1">2.5</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_13' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a>
                    <br />
                    
                </div>
                <div class="weight1">2</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_15' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a>
                    <br />
                    
                </div>
                <div class="weight1">1</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_14' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
          
			<div class="subtotal"><img alt="Update" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_update.gif" id="update" /> SubTotal</div>
			<div class="subtotalint">180</div>
            
        </div>



    <br />
    <a href="?Section=checkout"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_checkout.gif" id="checkout" /></a>
    <a href="http://www.refinethetaste.com/html"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_contshopping.gif" id="contshopping" /></a>
    </div>
   

Hello guys, my name's Ben, how y'all doing?

I recently took over a website for my uni canoe club and am trying to design a new, better looking version of the site at present. I am getting there, but I am having a few issues with CSS that I can't seem to fix. Note that I have been testing the site on Firefox, and plan to come back to any IE issues once it looks good with standards.

A static mockup (php will come later) of the site as it stands now can be found here (URL www DOT uhcc DOT co DOT uk/v3_mockup/) (excuse the dodgy slogon, that's just a placeholder from one of our old t-shirts) the two problems I am having are as follows:
I can't seem to remove the white spaces between the images in the right hand column. margin and padding are set to 0 for the images, so I can't see what is causing it I need the left and right column to extend right down to the footer. They are both set at "height:100%" but that doesn't seem to work. Also the #main div doesn't seem to extend down as far as the footer, either! ARGH!
Any help will be much appreciated!

I am brand new to CSS and I'm having two issues. I've searched around and I cannot figure this out.

1. I cannot get text inside a div. I'm using an external style sheet and I can't seem to get text to go inside a scrolling DIV. I'm completely confused.

2. The second issue is if the window shrinks or someone is using a smaller resolution, I want the CSS to shrink the page and stay uniform as well. It also doesn't play nicely in IE.

The issue I'm having is I'm not very comfortable with my CSS yet so I'm kind of hesitant to play around too much.

Here is my code. Please don't laugh too hard :/

Code:

body {
	background: white url(xxxxxx) repeat-y center;
}

#header { 

position: fixed; top: 0px; left: 20%;

}

#headertext {

position: fixed; top: 15px; left: 268px;
width: 100%;

}

#navbar {

position: fixed; top: 150px; left: 256px;
width 100%;

}

#navbartext {

position: fixed; top: 150px; left: 240px;
width: 100%;

}

#footer {

position: fixed; top: 735px; left: 256px;
width 100%;

}

#footertext {

position: fixed; top: 747px; left: 251px;
width 100%;

}

#textbackground {

background-color: #000000;
position: fixed; top: 193px; left: 256px;
width: 768px;
height: 542px;
overflow: auto;

}

I think I did alright for a first time CSS writer but it's obviously not right.

I am curious to know if IE8 as released is what I should be designing for? I have noticed that sites I have developed that look good in IE7 and FF look as they should, but open them up in IE8 and they do not look good at all. Tom

EDIT #2: Would have been nice if I had gotten some help. Anyways, managed to fix it by just messing around with the coding.

Here's what I did if anyone needs this as reference or help:
Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url("");
border:solid 0px #000;
}

/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url("") repeat-y;
overflow:auto;
margin-top:0px;
position: relative;
}

/* ----- NAVIGATION ----- */

#sidebar {
width:182px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;
float: right;
position:relative;
right:92px;
top:0px;
}

/* ----- MAIN CONTENT ----- */

#main {
width:362px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;

margin-top:0px;
position:relative;
left:72px;
top:0px;
}

/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url("");
margin-top:0px;
border:solid 0px #000;
}






EDIT: I fixed problems 1 and 3 but I still need help with problem 2. Why aren't my div layers moving AT ALL when I use the position: absolute value relative to another div layer????? Please help! Thanks!

Oh, forgot to mention, I'm using wordpress 2.7 in case it affects anything at all.

And here's the part of css concerning the divs :

Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url();
border:solid 0px #000;
}


/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url();
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:0px;
position: relative;
}


/* ----- NAVIGATION ----- */

#sidebar {
width:180px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
float:right;
}


/* ----- MAIN CONTENT ----- */

#main {
width:460px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
margin-top:0px;
position: absolute;
top:0;
right:30;
}


/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url();
margin-top:0px;
border:solid 0px #000;
}




Resolved Stuff: (incase anyone has the same issue and wanted to know what I did)

Quote:
Okay, I'm having trouble positioning my div boxes in the wrapper and some other minor issues that I just can't seem to make it work. They a

1) The background images are not lined up. How do I make the background images line up? (The header and footer have a background image and so does the content box). They are all off by a couple of pixels and I can't seem to get it to work. [FIXED: Just changed the size of the images, apparently css wasn't the problem.]

2) How do move the two div boxes in the div wrapper so that they are only over the image? (More specifically, the right div over the yellow paper part and the left div over the notebook paper part that's a bit faded.)

3) The footer cuts off and does not go to the full height I specified (325 px). [FIXED: Took another route and changed my css layering entirely.]

Ok so i made a site that validates in w3c check and shows ok on all browsers save for IE. Im really not sure where to begin on debugging it! http://new.mostardesigns.com/

Any help is much appreciated!

hello again,

I coded the basket page with rows and cells this time as per kk5st's suggestion. But yet here again with few problems.

see it yourself page:
http://www.refinethetaste.com/html/content/basket/basket.htm

1. I dont understand why the table is short now. it should strech up until the border.
2. I want remove button v-align at the bottom of the cell.
3. I want quantity input align right at the center.

I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong



Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .thdesc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .th	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .color	{ float: left; width:60px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .noncolor	{ float: left; width:60px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .intprice	{ font-weight:bold; }

#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
      <h1>Create a New Account</h1>
	  To take full advantage of your Williams-Sonoma account, please provide all the information below.
	  <div class="hline"></div>
	  <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" />
      <div class="basket">
        <table>
          <tr>
            <th class="thdesc">Product Description</th>
            <th class="th">Weight</th>
            <th class="th">Price</th>
            <th class="th">Qty</th>
            <th class="th">Total</th>
          </tr>
          
          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a> <br />
               </td>
              <td class="color">2.5LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_13' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='2' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$120</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a> <br />
               </td>
              <td class="color">2.15LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_15' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a> <br />
               </td>
              <td class="color">1LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_14' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

            <tr>
            	<td colspan="2"><img alt="Update Shopping Basket" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_updatesbasket.gif" id="updatesbasket" /></td>
                <td></td>
                <td>Subtotal</td>
                <td class="color">$240</td>
            </tr>
            <tr>
                <td>Shipping Options & Charges</td>
                <td colspan="2"></td>
                <td>Total</td>
                <td class="color">$90</td>
            </tr>
          </form>
        </table>
      </div>