CSS - A Link Size Not Being Picked Up

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

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}

Is it possible to define the size of a DIV, by distance to the edges?

This should be fairly simple, but I can't figure it out right now. I have a list of nav buttons that I have floated so they are inline. When I hover over them, a 4px border appears at the bottom. The problem is, it pushes my content container down on hover. I've tried margins and padding in different places, but can't seem to prevent it from happening. How do you prevent this?

Code:

#navcontainer
{
	display:inline;
}
#navlist
{
margin: 0;
padding: 0;
padding-bottom:20px;
border-bottom: 1px solid #FDC737;
float:right;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist li
{
	line-height: 14px;
}
#navlist a:link, #navlist a:visited
{
float: left;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #fff;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #FDC737;
padding-bottom: 2px;
background: transparent;
color: #FDC737;
}

#navlist a:hover { color: #fdc737; }

Code:

-----------------------------------------------------
|        |  H1                                           
|image|
|        |  H2                                      Inline nav tabs
-----------------------------------------------------

I'm not a programmer by nature, but am picking things up as I go along. I'm working on some forms to make my job easier. Hopefully what I will provide below is enough info to provide a solution. If not, let me know what else you might need.

I understand that this section of CSS manipulates the size and other attributes of the textarea input box:


fieldset div input,fieldset div textarea {
width:150px;
border-top:1px solid #555;
border-left:1px solid #555;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
padding:1px;color:#333;
}

What I am looking for is what do I need to add to my CSS and consequent HTML markup to have other textarea input boxes with different attributes? What I really need is to have 4 small boxes within the same div on the same row.

Thanks in advance!!

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

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

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller


here is a preview with that css file in use : http://www.dbznetwork.net/

Hi,

For some reasons, my CSS linked file is not taking any more rules. Is there a maximal number of rules per CSS file?
Thanks

I am new to adsense. I was wondering if I should specify the size of each ad in css (via the div I have around each ad). Or is this unnecessary? (I am not asking if I can change the designated size of the ads in css, but just if I should put in the width and height of the standard ad sizes I have chosen). Any insight would be greatly appreciated. Thanks.

Please help!

I've got two rounded boxes one is contained in the other. If the innerbox grows, the outer box should grow with it. Firefox does a great job and grows with it but IE7 doesn't grow, any help would be greatly appreciated.

here's the CSS i've used for IE:
Code:

/* first rounded box */
/* images are set in the index.php */
 /* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
	width: 100%;
	height: 14px;
	font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; background-color: #37a5f0;} */
.rbroundbox { position: absolute; top: 15px; width: 800px; margin: 5em 0 0 2em; background-color: #37a5f0; } 
.rbcontent  { margin: 0 14px; min-height: 570px; height: 100%; }
/* EOF first rounded box */

/* second rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
	width: 100%;
	height: 24px;
	font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; }*/
.rbroundbox2 { position: absolute; top: 5px; width: 577px; margin: 9.5em 0 0 12em; background-color: #9cd5f0;} 
.rbcontent2  { margin: 0 14px; min-height: 375px; }
/* EOF second rounded box */

here's the html i've used:
Code:

<body>
<div class="rbroundbox">
    <div class="rbtop"><div></div></div>
    <div class="rbcontent">
      <div class="rbroundbox2">
            <div class="rbtop2"><div></div></div>
            <div class="rbcontent2">
               <p><?=$content?></p>
            </div><!-- /rbcontent2 -->
      		<div class="rbbot2"><div></div></div>
      </div><!-- /rbroundbox2 -->      
    </div><!-- /rbcontent -->
    <div class="rbbot"><div></div></div>
</div>
<!-- /rbroundbox -->

</body>

Hello.

I was wondering how I would go about doing this.

I have a div, the left and right side of it is an image that I want the size to be able to be fluctuated, say, if the div goes larger than say 50 px, then it will start repeating and get larger. I have tried to start this already, but I havent had any luck. I also am not having any luck on getting the backgroun image to show. Anyone here know how I would make it to where my left or right side (border-right, border-left) will automatically resize if it is needed to go larger or get my background image to show? It's for a news conent box for my website I am coding, and I need it to go larger than just a set value. Thanks for your help.

P.S. this is what I have so far
Code:

<div style="width:460; height: auto; border-right: url("images/border_right.gif"); border-left: url("images/border_left.gif"); background-image: url("images/content_content.gif"); background-repeat: repeat;">
News content will go here
</div>

Hello,

I have something has follows:

<div>
...
<table>
...
</table>

</div>

My document font size is 1em.

My div font size is 1.4em.

What should be the font-size in my table to get back to the 1em of the document?

Thanks,
Miguel

http://www.santeecooperobgyn.com/obgyn

I have just begun to design a website and already I have run into bizarre (to me) behavior.

In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference.

Here is the relevant CSS.

Code:

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

#navbar {
	list-style-type: none;
	margin-left: 0px;
	background-color: #336633;
	padding: 0em;
	height: 2em;
	margin: 0px;
	font-size: 10pt;
}

#navbar li {
	display: inline;
	float: left;
	padding: 0.5em;
}

#navbar li a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	vertical-align: baseline;
	line-height: 100%;
}

#navbar li a:hover {
	background-color: #669966;

I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases.