CSS - Css Link And Href Issues

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

Hi there,

this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site.

I know the #blah should be used to set an id for it, but here's my concern;
1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">).
2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different?

thanks in advance.

Code:

<div id="topNav">
	<ul id="cssdropdown">
		<li class="topNavTitle"><a href="" class="atopNavTitle">---A---</a>
			<ul class="subuls">
			<li><a href="a.php">AAA</a></li>
			<li><a href="b.php">BBB</a></li>
			</ul>
		</li>
		<li class="topNavSep"></li>
		<li class="topNavTitle"><a href="" class="atopNavTitle">---B---</a></li>
	</ul>
</div>

<style type="text/css">
li.topNavTitle a.atopNavTitle {
margin-top: 20px;
padding-top: 20px;
}
</style>

Hi,
I am trying to move
<a href="" class="atopNavTitle">---A---</a>
<a href="" class="atopNavTitle">---B---</a>
down 20px.
I have tried the above style but it does nothing.
What do I do wrong?

how may i define that <a name> is not related to general selector by <a> tag? e.g. i don't want when i mouse over <a name> to change its color defined ny a:hover. assidning separate class to them is nightmare.

Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out...

I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself...

What I'm trying to accomplish is the same thing, only with a div that has textual content....

I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings...

I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail....

I hope this is a decent enough description of the problem... anyway to accomplish this???

Hi,

is there a method of setting the color for title="some text" in a hyperlink ?

e.g. [<a href="index.php?page=links.php" title="Redlake Valley business websites">Local Links</a>]

TIA

Mike

Hi,

I am at this point too tired to continue to search for my answer, so I am going to just ask...

I would like to be able to control the color and underlining of the links in the unordered list. This list will appear on every page in the site. I am not sure what the CSS code is or in which class/id to place it in my css file.

the page code is:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	<link rel="shortcut icon" href="" />
	<link rel="stylesheet" type="text/css" href="style.css" />	
	<script src="nav.js" type="text/javascript"></script>
	<title>Natura Culina :: Welcome</title>
</head>

<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()" bgcolor="#D89607">
<div class="allcontent">
  <div id="header">
  <ul id="navigation">
<li><a href="index.php">home</a></li>
<li><a href="products.php">products</a></li>
<li><a href="ingredients.php">ingredients</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="testimonials.php">testimonials</a></li>
<li><a href="links.php">links</a></li>
</ul><!---end navigation--->
</div><!-- end header -->
  <div class="textArea">
  <p align="center"><span class="header1">Welcome to 
              Natura Culina Organic Skin Care </span></p>
            <p><br />
      <img src="/images/all229.jpg" width="367" height="233" align="left" class="left" /><span class="bodyBold">Natura 
      Culina</span> creates luxurious skin care products that will appeal to your 
      senses, inspired by skin care traditions used at centuries old European 
      Spas.</p>
            <p>We are <em><span class="bodyBold">so over</span></em> using chemical 
              solutions for our skin problems because they are so unsatisfactory.<br>
              We are <em><span class="bodyBold">so back</span></em> to feeding 
              our skin with natural ingredients, oils, vitamins and antioxidants.</p>
            <p>All the oils used in our products are cold pressed and certified 
              organic. All our ingredients are carefully blended to create effective, 
              nourishing and natural products for your skin. All body products 
              are made after placing an order to assure freshness. </p>
            <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
            <p align="center"><em><span class="bodyBold">Start loving your skin 
              again with Natura Culina Food For Your Skin.</span></em></p>
            
</div><!---end contentBGColor--->

</div><!---end allcontent--->
</body>
</html>

and the CSS sheet code is this:

Code:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #D89607;

}
#body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #E1A21A;

}
.allcontent {
	width: 736px;
	margin-left: auto;
	margin-right: auto;
	border: thin dotted;
	margin-top: 10px;

}
#header {
	background-image: url(/images/banner1.jpg);
	background-repeat: no-repeat;
	height: 260px;
	margin-top: -18px;
}
.textArea {
	background-color: #E1A21A;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;

}
#navigation li {
	float: left;
	list-style: none;	
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 240px;
}

#navigation {
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	
}
img.left {
    padding: 0px 10px 0px 0px;
	float: left;
}

.header1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.bodyBold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;

}
.small {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
.itemBorder { border: 1px solid #73090E }
.itemText { text-decoration: none; color: #F3F7FD; font: 14px Arial, Helvetica }
.itemTextHeaders { text-decoration: none; color: #E6EBF2; font: bold normal 13px Verdana, Arial, Helvetica, sans-serif}

Hi,

My CSS has a simple declaration for "A" href tags:

Code:

		a { 
			color:#8D603B ; 
			text-decoration: underline;
			font-weight:bold; 
		}
		a:visited { 
			color:#8D603B ; 
			font-weight:bold; 
		}
	  	a:hover { 
			color:#A97043 ; 
			font-weight:bold; 
		}

So, this is used throughout the site.

However, I want to specify a different style for the "A" tag if it is within a certain DIV.

For example,

Code:

<div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div>

<div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div>

The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS.

Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)?

Thanks very much!

Hello friends!

I have a menu item href called "underbar-tag0".
When I hover this: the background of the class changes - as you can see in the code.
Everything is fine.

But what I also want is that when I hover the href: a (another) floating div should get visible.

(First not showing, but when hover the menu href it gets visible)
(the name of the "invisible" Div is protip, the position of it is not important at the moment.)

This is what my HTML looks like.

Code:

<div class="protip"></div>

<div class="underbar"> <a href="" class="underbar-tag0">Click here.</a> 
</div>

This is what my CSS looks like.

Code:

.protip {
	height: 164px;
	width: 191px;
	z-index: 500;
	position: absolute;
	background-image: url(../../Root/recommended.png);
}
.underbar {
	height: 42px;
	width: 1100px;
}
a.underbar-tag0 {
	display: block;
	width: 90px;
	height: 32px;
	float: left;
	color:#000;
	background-image: url(../../Root/buy_blue.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-right: 0px;
	padding-top: 9px;
	padding-left: 40px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 80px;
	font-weight: bold;
}
a.underbar-tag0:hover {
	color:#9C0;
	background-image: url(../../Root/buy_blue.png);
	background-repeat: no-repeat;
	background-position: 0px -45px;

I have searched the Internet very long time without answers.
Is this possible, like somehow link so when the class "underbar-tag0:hover" activates then "protip" is displayed?

Sorry if my English is bad, I am from Europe but I think you understand me.

I've got two hidden maps which display in a div when the link is hovered. If I put an H3 inside the anchor to style the link text, it doesn't inherit the link and hover colors of the rest of the site. If I move the H3 outside the <a href> it breaks the hidden span stuff in Firefox. But the colors work! If I just use normal text it works fine but displays inline and small and crappy...

Here is my CSS for the div:
Code:

div#maplinks {margin:10px 0; padding:0;}
div#maplinks a span {display: none;}
div#maplinks a:hover span {display: block;
   position: absolute; top: 1em; left: 330px; width: 420px;
   padding: 0px; margin: 0px; z-index: 100;
   background: white;
   text-align: center;}

and the HTML
Code:

<div id="maplinks">
	<a href="images/sabah-map-400X319.jpg"><h3>&nbsp;View Sabah Map</h3><span><img class="centimg" src="images/sabah-map-400X319.jpg" width="400" height="319" border=0 alt="Sabah Map"><p class="credit">Sabah Tourism</p></span></a>
	<a href="images/borneo-map.gif">&nbsp;Map of Borneo and Region<span><img class="centimg" src="images/borneo-map.gif" width="420" height="330" border=0 alt="Borneo Map"><p class="credit">Expedia.com</p></span></a>
</div> <!-- maplinks -->

How would I address this <h3> element?
Or do I try to style that div's a:link and a:hover? (that didn't seem to work).

Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work:

<a href="test.html" style="a:hover { color: #DA8525; }">Test</a>

Is that suppose to work?

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.

I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code

Code:

.globalNav, .globalNav td {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height:28px;
	border-bottom: 1px solid #94AEC1;
	border-collapse: collapse;
}

.globalDiv{
	color:#fff;
	width:100%;
	height:28px;
	background:#94AEC1 url(../images/grad_bar.gif);
	background-color:#94AEC1;
	margin:0px;
	padding: 0px 0px 0px 10px;
	overflow:hidden;
}
.globalDiv a{
	font-size:10pt;
	color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
	text-decoration:underline;
}

.globalDiv a:hover{
	text-decoration:none;
}

Thanks