CSS - Having Problems With Specific Semantic Markup

I noticed that googlebot is reading and indexing the content of the left sidebar and and not the center content (title of posts etc).

I have tried this fix:

Place the sidebar call after The Loop in your theme files and then use CSS to float your post content right or absolutely position your sidebar on the left.

Because the spider bots read the page markup from the top down. So if your left sidebar lies above your post content in the markup, the sidebar will be indexed first. If, on the other hand, your left sidebar appears below your post content in the markup but is positioned left by CSS, the bots will index your post content first.

It works when I float the center content to the right to the point where the sidebars are where they are supposed to be but they are pushed down a little from the top and it throws the page nav (bottom of center content) and the footer out of wack.

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

Hey guys,

I am taking a computer science class at the moment and haven't received much direction on what to do.

I had to design an HTML website from scratch which wasn't hard but now I have to incorporate CSS into the website using an external stylesheet to edit the entire website.

I need to recreate these things and am wondering what I should be doing, any help is extremely appreciated.
It's a mock-business type website.

Here I have to have the picture on the left, a vertical line, and a paragraph on the other side, all within a border.

s1224.photobucket.com/albums/ee361/millihax/?action=view&current=staff-outline.gif

And here I have to make a table that looks exactly like this but without the "colour" column.

s1224.photobucket.com/albums/ee361/millihax/?action=view&current=staff-outline.gif#!oZZ1QQcurrentZZhttp%3A%2F%2Fs1224.photobucket.com%2Falbums%2Fee361%2Fmillihax%2F%3Facti on%3Dview%26current%3Dtable-outline.gif

Again, anything anyone can do for me is greatly appreciated as I am completely lost with this section of the assignment.

I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes.

Hi,

I'm trying to create a CSS for a specific table, not all tables,

the following code uses the code I need:

PHP Code:
 table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid grey;
padding:15px;
} 





How can assign/rename this to say mytable, if I change the top 'table' to .mytable still all tables on my page are changed

Thanks for any help.

Sanj

For example lets say I have this line of code and I want to select the userid in order to style a particular user on a site/forum.


<div class='username'>Test <span class='userid'>(223647)</span></div>

How do I go about selecting the 223647 ID so I can assign it a specific style?

Thank you in advance for any help.

Hi,
I have a weird litlle problem here...

I have embedded a forum (invision) in my website. This forum uses a stylesheet for all its settings (duh).
I can choose if I want to use it inline or external.
Offcourse, my site also has its own stylesheet to work with.

Because the forum code is on a <div > in my site, the css from the forum messes up my site.

Is it possible to get the forum stylesheet to be only applicable inside the layer that it's on? Inline or linked?

I tried using an iframe instead of a div, but that gives a heap of other trouble (especially cookie-related) so that's not an option...

This is a bit puzzling for me. I read that I can apply css to something based on id, which I have been doing, thats how my template is made, USING CSS :S.

I need to apply css to an H2 that already has css applied to it but has a different id.


Here is the page I need to do it to, view it and see why I need to.

http://www.coldfusionzone.com/index.php?p=7

Look down towards where the comments are and youll see
Leave a comment


I need to change that to where it expands up to 40 pixels from the side, and has a black background without the stinkin date pic next to is .

Now that Im talking about it im confused again. Ha ha I had it down pat but now that I need help im confused thats strange.

But I need to apply a css style to it when it already has a css it....


Here the css style that controls it is on top and the css style im trying to use is on the bottom.

PHP Code:
 div#content h2 {
       background: #000 url(images/date.jpg) no-repeat left center;
       background-color: #232323;
       color: #5F5F5F;
       padding: 2px 15px 2px 85px;
       border: 1px solid #494949;
       margin-left: 40px;
       margin-right: 220px;
       margin-bottom: 10px;
       margin-top: 0;
       font-size: 95%;
       font-weight: normal;
   }
   div#content#postcomment h2 {
       background: #000;
       background-color: #000000;
       color: #5F5F5F;
       padding: 2px 15px 2px 85px;
       border: 1px solid #494949;
       margin-left: 40px;
       margin-right: 220px;
       margin-bottom: 10px;
       margin-top: 0;
       font-size: 95%;
       font-weight: normal;
   } 

Hello Gents, I am trying to get ride of the white space above the menu and above the big sliding banner...Any pointers would be great. getyoursongsmixed.com/wordpress is my site

You guys rock thanks

If I want to have all of my <td> flags to look a certain way within a <div> tag but not anywhere else how do I define the style to do this?

Hi,

I've seen things like this in CSS elsewhe

Code:

<style type="text/css"><!--
td[width="350"] {
    background-color: #FFFFFF;
}
--></style>

The above is just an example, and it might not even be what I'm looking for. But it appears that the above would only change the background color of a table cell that is 350 pixels wide (no other table cells will be changed)?

Is this how this is done? And if not, I'm trying to do something along that concept, somewhat like this:

Code:

<style type="text/css"><!--
table[border="2"] td .classname {
    color: #FFFFFF;
    font-family: verdana;
}
--></style>

If this doesn't make sense, I'll try to reexplain.

But if this can be done I'd be ever so grateful.

Thanks!
~Kevin

I have a site www.carrie-anne.co.nz just refer to index.asp
It has 3 css. I have a problem with main.css

The problem is minor, but annoying. It is to do with the lhs menu called menucontainer. The menu is a list and the rules applied to it are quite specific.

Below menucontainer is contactcontainer and that too has specific rules.

What happens is that I am getting the menu text underlined when I state that decoration:none; On further testing by commenting out rules ( so they don't render ) I find that rules for contactcontainer are over-riding menucontainers.

Can anyone shed any light? It is driving me spare..
Here is the css file.
Code:

body {
	background-color: black;
	background-image: url(web_images/layout/carriebackground.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 0px;
	margin-left: 80px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-attachment: fixed;
}


#container {
	width: 800px;
}
#taglinecontainer {
	width: 410px;
	padding: 0px;
	margin-left: 380px;
}


h1#carrieheadingmodelling {
	background-image: url(web_images/layout/modelling.jpg);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 30px 0px 0px;
	overflow: hidden;
	height: 0px;
	
}

h1#carrieheadingacting {
	background-image: url(web_images/layout/acting.jpg);

	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 32px 0px 0px;
	overflow: hidden;
	height: 0px;
}


h1#carrieheadingpromotional {
	background-image: url(web_images/layout/promotional.jpg);
	
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 39px 0px 0px;
	overflow: hidden;
	height: 0px;
}
h1#carrieheadingtop {
	background-image: url(web_images/layout/carrie_anne_freeman.gif);
	height: 0px;
	
	background-color: transparent;
	background-repeat: no-repeat;
	margin: 0px;
	overflow: hidden;
	padding-top: 61px;
	background-position: right top;
}
/*------------------------------Menu stuff----------------------------------------------------*/
#_____________________________{}

#menucontainer {
	width: 220px;
	margin-top: 50px;
	border-right: #330099;
	border-bottom: #333399;
	border-left: #336699;
	padding: 0px;
	margin-bottom: 30px;
	height: 325px;
	background-image: url(web_images/layout/menubackgroundtrans.png);
	text-decoration: none;
}
h1#selectacatergory {
	background-image: url(web_images/layout/menu.gif);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding: 38px 0px 0px;
	overflow: hidden;
	height: 0px;
	position: absolute;
	width: 222px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	/* if ie- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='web_images/layout/selectacatergory.png');*/
}


#container #menucontainer ul {
	width: 222px;
	margin: 39px 0px 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
	height: 240px;
	position: absolute;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;	
	text-decoration: none;
}
#container #menucontainer li {
	margin: -10px 0px -12px;
	padding: 20px 0px 6px 34px;
	display: block;
	height: 20px;
	background-image: url(web_images/layout/butterfly.gif);
	background-repeat: no-repeat;
	background-position: 0px 11px;
	border-bottom: 1px dotted #000000;
	text-decoration: none;
}
#container #menucontainer ul li a:link, a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #FF6633;
	font-weight: bold;
	text-decoration: none;
	margin-left: 3px;
}
#container #menucontainer ul li a:hover {
	color: #FFFFFF;	
	text-decoration: none;
}
#container #menucontainer ul li a:active {
	color: #FF6633;	
	text-decoration: none;
}

#container #menucontainer  ul li#current {
	margin: -10px 0px -12px;
	padding: 20px 0px 6px 34px;
	height: 20px;
	background-image: url(web_images/layout/butterfly_current.gif);
	background-position: 0px 11px;
	border-bottom: 1px dotted #000000;
	display: block;
	text-decoration: none;
}

/*Contact Section*/
#________________________________________{}
#contactcontainer {
	width: 225px;
	position: absolute;
	margin-top: 47px;
	background-image: url(web_images/layout/menubackgroundtrans.png);
	padding: 0px;
}


h1#contactme {
	background-image: url(web_images/layout/contactme.gif);
	background-color: #000000;
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding: 42px 0px 0px;
	overflow: hidden;
	height: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 225px;
}

#contactcontainer ul {
	margin-top: 10px;
	margin-bottom: 20px;
	list-style-type: none;
	padding: 0px;
	width: 182px;
	margin-left: 42px;
	z-index: 1;
}
#contactcontainer li {
	list-style-type: none;
	color: #FF6633;
	line-height: 2.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .85em;
	margin: 0px;
	padding: 0px;
}
#contactcontainer li a:link, a:visited {
	list-style-type: none;
	color: #FF6633;
	line-height: 2.5em;
	text-decoration: underline;
	margin: 0px;
	padding: 0px;
	position: relative;
}

#contactcontainer li a:hover {
	list-style-type: none;
	color: #FFFFFF;
	line-height: 2.5em;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	position: relative;
}
.photoholder {
	display: block;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	width: 222px;
	height: 207px;
	border-top-width: 0px;
	border-top-style: none;
}*/
#______________________rightcontent________________________{}
#rightcontent_holder {
	width: 545px;
	position: absolute;
	margin-left: 250px;
	margin-top: -324px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-image: url(web_images/layout/large_blackbutterfly.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#rightcontent_homepage {
}
#flow01, #flow02, #flow03, #flow04, #flow05, #flow06, #flow07{
	float: right;
	clear: right;
	margin: 0 0.5em 0 0;
}
#flow01 {width:250px; height:80px;}
#flow02 {width:275px; height:60px;}
#flow03 {width:285px; height:42px;}
#flow04 {width:300px; height:80px;}
#flow05 {width:200px; height:50px;}
#flow06 {width:150px; height:45px;}
.hidecap {
	display: none;
}
.homepagewelcometext {
	background-image: url(web_images/layout/Welcome_w.gif);
	background-repeat: no-repeat;
	text-indent: 53px;
	font-size: .75em;
	line-height: 2em;
	color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 10px;
}
.signature {
	background-image: url(web_images/layout/carrie_sig.gif);
	height: 75px;
	width: 200px;
	margin-left: 21px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 50px;
	background-repeat: no-repeat;
}
#-----------------------footer---------------------{}
#footer {
	background-color: #00264C;
	border: 1px solid #166286;
	margin-bottom: 5px;
	margin-top: 35px;
	position: relative;
	width: 550px;
}
#footer p {
	color: #FF6600;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .6em;
	text-align: center;
	margin-bottom: 8px;
	margin-top: 8px;
}
#crediting {
	color:#000000;
	margin: 0px;
	padding: 0px;
	display: block;
	width: 500px;
}
.footerimages {
	background-color: #000000;
	margin-left: 48px;
}
.credittext {
	color: #E17717;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	margin: 0px;
	padding: 0px;
}
.standardcopy {
	font-size: .75em;
	line-height: 2em;
	color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 10px;
}
#confirmation_holder {

	width: 500px;
	position: absolute;
	margin-left: 275px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

div#crediting a#link, img {
	text-decoration: none;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
}

Hi, I need to make colored boxes a specific height. Also, the box must stretch to fit the text within it. The text will be updated when a user clicks different nav buttons.


Here's my code:: Code:

.category{
background-color:#8CC63F;
color:#000000;
font size:21pt;
height:36px;
}

the problem is that the box isn't 36 pixels tall.

you can see my example he link

Look at the box with the text description, and the box that says "cam tu dao".

Any ideas. I've been trying everything I could think of.

thanks

The title might seem like an oxymoron, but here follows what I want to do, for a navbar I am making, where the links are divided into categories, each with their own header div, I do not want those header divs to be visible unless there is any content (text) in them, but at the same time, if there is content in them, I want them to take specific dimensions.

Is there a way to achieve this? That is, either do not appear at all, but if it is to appear, it is to be a certain specified height and width. The min- and max width/-height's do not do the trick here, however I suspect I am far from the first to want to do this so there ought to be a hack or solution of some sort.

Maybe I should add that it is only the height that is an issue here really. I want it to be 19px lest not appear at all.