CSS - Menu Tabs, Diff Styles Without New Classes

Ok so I got a big one here... At least it is to me. I know absolutely NOTHING about CSS.

I use GoDaddy.com and their program WebSite Tonight to build my website.

http://www.thebdsmith.com

My problem is this.

I build the site using a Macbook Pro 15 inch. I always felt I was rather limited with space.

I was on my brother in laws computer, he has a PC with a widescreen monitor. When viewing the site on HIS computer there was so much empty space on the right hand side. So I got excited and redesigned the site (after redesigning just 2 a week earlier). The outcome was so much better than before.

NOW, this is the problem. When I go back to my Macbook area is missing again and I have to scroll right to see it. I do NOT like that.

I emailed GoDaddy support one guy gave me the dumbest reply I've ever heard that was the OPPOSITE of what I had stated. Another said my template design is a fixed width and I'd have to edit the CSS coding to fix it.

I don't know where in the CSS code to edit.

This is GoDaddy default CSS that I am just wanting to edit and reuse. I know nothing of CSS so I don't see why not.
Code:

/**
 * @file
 * @project 675
 * @package sftheme
 * @site app1
 */


/** 
 * ------------------------------------------------------------------
 * @section RESETS
 * ------------------------------------------------------------------
 */

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
	font-family: Verdana, Geneva, Kalimati, sans-serif;
    font-size: 11px;
	color: #ffffff;     
	background-color: #051417;
	
	background-image: url(images/675_background.jpg);
	background-position: center top;
    background-repeat: no-repeat;
	

}

   a:link{color: #ffffff;}
   a:visited{color: #ffffff;}
   a:hover {color: #ffffff;}
   
   .sf_navigation ul li a {color: #ffffff;}
 
   .sf_navigation ul li a:visited {color: #ffffff;}
  
   .sf_navigation ul li a:hover {color: #ffffff;}

   .sf_navigation .subnav li a {color: #ffffff;}
   
   .sf_navigation .subnav li a:visited {color: #ffffff;}

   .sf_navigation .subnav li a:hover {color: #ffffff;}
 
   .sf_footer {color: #ffffff;}

   .sf_pagetitle {color: #ffffff;} /*(WST Only)*/
  

.sf_outer_wrapper {

}

.sf_main_header {
   color: #ffffff;
   font-size: 32px;
   font-family: Verdana, Geneva, Kalimati, sans-serif;
   padding-left: 29px;
}

.sf_pagetitle {
  font-family: Verdana, Geneva, Kalimati, sans-serif;
    font-size: 24px;
    font-weight: normal;
    margin: 0;
    padding-top: 0px;
}

.sf_pagetitle h1{
  font-family: Verdana, Geneva, Kalimati, sans-serif;
    font-size: 24px;
    font-weight: normal;
    margin: 0;
    padding-top: 0px;
}

/** 
 * ------------------------------------------------------------------
 * @section HEADER
 * ------------------------------------------------------------------
 */

.sf_outer_wrapper {
    border-left:1px solid #2D4461;
    border-right:1px solid #2D4461;    
}
* html .sf_outer_wrapper {
    width: 1200px;
}

.sf_main_wrapper{
    width: 600px;
	float: left;
	margin-left: 67px;

}
* html .sf_main_wrapper{
	margin-left: 0px;

}
.sf_wrapper {
    margin:0 0;
    padding:0px 10px;  
	width: 1000px;  
}

* html .sf_wrapper {
	width: 1200px; 
}

.sf_wrapper:after {
	clear:both;
	content:".";
	display:block;
	font-size:1px;
	height:0pt;
	visibility:hidden;
}
.sf_region3 {
    height: 150px;
}

.sf_main_header {
    padding-top: 33px;
    margin: 0px 33px;
    color: #FFFFFF;    
}

/** 
 * ------------------------------------------------------------------
 * @section NAVIGATION
 * ------------------------------------------------------------------
 */

.sf_region4 {
	float: left;
	font-size: 14px;
    width: 200px;
    overflow: visible;
    float: left;
    padding-bottom: 50px;
	padding-right: 50px;
    text-decoration: none;
	margin-top: 53px;
    margin-left: -24px;
    .margin-left:-14px;
}

.sf_navigation .nav a {
	width: 139px;
	padding: 10px;
	font-size: 18px;
}

.sf_navigation .sf_first_nav_item  {
	background-repeat: no-repeat;
	background-position: 0px 0;
	padding-top: 12px;
	border: 0;
}

.sf_navigation {
	 float: left;
    padding-bottom: 50px;
	padding-right: 50px;
    text-decoration: none;
	margin-top: 0px;
    width: 159px;
	margin-left: 77px;
	z-index: 1000;
	position: relative;
}
* html .sf_navigation {
	margin-left: 33px;
}

.sf_navigation .nav .subnav a {
    background-image: none;
	font-size: 12px;
	padding-bottom: 12px;
	padding-top: 12px;
	background-color: #051417;
	background-repeat: no-repeat;
	background-position: top right;
	border: none;
	z-index: 1000;
}
.sf_navigation .nav .subnav a{
    background-color: #051417;
	color: #ffffff;
}
.sf_navigation .nav .subnav a:link{
    background-color: #051417;
	color: #ffffff;
}

.sf_navigation .nav .subnav a:visited{
    background-color: #051417;
	color: #ffffff;
}
.sf_navigation .nav .subnav a:hover {
    background-color: #051417;
	color: #ffffff;
}

.sf_navigation ul {
	padding: 0 0 12px 0;
	margin: 0;
	list-style: none;
	float: left;	
	background-position:0 bottom;
	background-repeat:no-repeat;
}

.sf_navigation:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}

.widget {
    margin-left: 24px;
}
* html .widget {
    margin-left: 24px;
}

.sf_region4 .sf_navigation .nav a:hover {
    text-decoration: none;
}

.sf_navigation ul li {
	float: left;	
}

.sf_navigation ul li a {
	width: 214px;
	display: block;
	text-decoration: none;
	padding: 0;
    padding-bottom: 12px;
	width: 200px
}

.sf_navigation li ul.subnav {
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	width: 160px;
	position: absolute;
	left: -999em;
	margin-left: 158px;
	margin-top: -43px;
	z-index: 1000;
    padding:5px 5px 0;
	background-image: none !important;
	background-color:#051417;
}

.sf_navigation .subnav li {
	float: left;
	margin-bottom: -1px;
	width: 176px;
}

.sf_navigation .subnav li a {
	width: 11em;
	display: block;
	color: #000000;
	text-decoration: none;
	padding: 0;
    margin-bottom: 0px;
}

.sf_navigation .subnav li a:visited {
	color: #000000;
}

.sf_navigation .subnav li a:hover {
	color: #000000;
    text-decoration: none;
}

#Nav1 li:hover, 
#Nav1 li.hover {  
    position: relative;  
}
/* lists nested under hovered list items */
#Nav1 li:hover ul, 
#Nav1 li.sfhover ul { 
	left: auto;
}

#Nav1 iframe{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
    display: none;
}

* html #Nav1 iframe {
    display: inline;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

.sf_navigation .widget_header{
    display: none;
}

.sf_navigation ul.subnav a {
    color: #FFFFFF;
}

.sf_navigation ul.subnav a:hover {
    color: #a4bedf;
}

.sf_navigation ul.subnav a:visited {
    color: #FFFFFF;
}

/** 
 * ------------------------------------------------------------------
 * @section MAINCONTENT
 * ------------------------------------------------------------------
 */

.sf_pagetitle {
	margin-left: 316px;
	width: 600px;
	margin-bottom: 20px;
	padding-bottom: 10px;

}

* html .sf_pagetitle {
    margin-left: 5px;
}


.sf_pagetitle h1 {
    padding-right: 22px;
}

.sf_main_wrapper {
    margin-top:-25px;
    padding-bottom: 50px;
}

.sf_content {
    padding-left:27px;
    padding-top:21px;
	float: left;
	width: 600px;
}

* html .sf_content {
	padding-left:0px;
    width: 700px;
}


/** 
 * ------------------------------------------------------------------
 * @section FOOTER
 * ------------------------------------------------------------------
 */

.sf_footer{
    width: 425px;
    margin: 0px auto;
    padding-top: 60px;
    padding-bottom: 20px;
}

a:hover {
   text-decoration: none;
} 
* html a {position:realtive}

Sorry for the huge post and thanks for taking the time to read and any help you may offer!

B.D.Smith

Hi guys,

I've been working on my CSS for a short while now. I'm attempting to get a "layout" for my site that I can work with, and I thought that a table-less layout was the way to go. I had a few problems initially with CSS and posted some code on here, and was lucky enough to get the help of an expert.

He pointed out that I needed Doctypes, character sets and so on and helped me get started. I spent a "bit" of time at work doing a bit more to the page and was really pleased with the result - see attachment. I know it is currently quite crude (and the colours are appauling!) but it's practice.

I then took my work home and opened it on my computer, and it has fallen apart AGAIN. I cannot believe that it can look so different in the SAME browser on different computers.

At home I am using IE 6.0.2900... on WinXP SP2
At work I am using IE 5.50 on Windows 2000 SP4

I am getting so frustrated that everything in CSS seems to involve having little "extra bits" here and there to make work in each browser (or the same browser, different versions!), when the whole idea was to reduce coding and make life easier.

I know that I have not posted any code, which could make helping me out difficult....but just by looking at the images below, does it look like I need a simple "hack" (whatever they are!) - ChiefWigs spoke about using an <! IF IE... comment to help out. Or should I look at just reducing everything by a pixel or two to make it fit...and just accept that gaps will be slightly larger on other browsers? It might be worth noting that I am using absolute dimensions (px) for the panels and menu holders...but relative widths (em) for things like the hyperlink boxes...

I'm getting really depressed about the whole CSS thing, its already putting me off continuing to learn .

If anyone could offer me help I would be very grateful.

Regards,

Porky

Thanks for taking the time to read my question.

I am setting the font size for this tag in CSS and it is showing up in different sizes depending on the browser.

The font is bigger in FF than it is in IE7. My text fits in the desired area in IE7, but is way to big in FF.

I have to be doing something incorrect here. Does anyone notice anything?

Thanks,

Brad

HTML:
Code:

<p id="FillText">Click on an item under <strong>'Latest News'</strong> to read more about it here and get links to the full story...</p>

CSS:
Code:

#FillText {
font-size: 16px;
color: #ffffff;	
height: 280px;
padding-top: 20px;
padding-left: 90px;
padding-right: 15px;
/*padding: 30px 34px 20px 96px;  */
text-indent: 20px;
}

What is the best practice for giving an <a> a different color than the underline? Background image? <a><span></span></a>? Something else?

Hi,

As you no doubt can tell from the title of this thread I'm a newb. I'm familiar with html but moving into learning css. Self taught, I no doubt have a lot to learn but I'm attempting to alter a template and would really appreciate some assistance.

The site is www . inspirationz . info.

I look at the site on my main monitor which is a large one and all looks fine. The two boxes in the main content area sit side by side, however when I look at it on my laptop or on a smaller monitor the navigation box on the right appears to sit still to the right, but beneath the box on the left.

It didn't appear this way in firefox browser at first on my laptop, only Internet Explorer, but it appears that way on my other pc monitor in firefox so I assume it's likely to be a coding error. I have included some of the stylesheet coding below.

Is anyone able to help me work out what's causing this?
Thank you in advance.

/*================================================================
Typography and links
==================================================================*/

a:link, a:visited {
color: #999999;
text-decoration: none;
}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, .sidebar_nav a {
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1em;
font-weight: bold;
letter-spacing: .16em;
}

.featured h2 {
font-size: 1.8em;
font-weight: normal;
text-transform: uppercase;
}

.post_header h2 {font-size: 1.2em; font-weight: normal; margin-top: 10px;}

.post_header_page h1, .post_header_single h1 {
font-size: 2em;
font-weight: normal;
text-transform: uppercase;
}

#footer h3 {margin-bottom: 25px; border-bottom: 1px dotted gray; padding: 5px;}

.featured p {
font-size: .8em;
font-style: italic;
}

p {
margin: 15px 0px;
}

.post_body_page p, .post_body_single p {margin: 0; padding: 15px 0px;}

small {
font-size: 0.8em;
font-style: italic;
}

strong {font-weight: bold;}

.post_body p {
font-size: 1em;
margin: 10px 0px;
}

.more {
margin-top: 10px;
margin-right: -10px;
float: right;
}

.more_big {
margin-top: -20px;
margin-right: 20px;
float: right;
width: 139px;
height: 73px;
}

.footer_comments {
float: left;
margin-left: 20px;
margin-top: 20px;
}

.comment_count {
font-weight: bold;
font-size: 1.8em;
}

.featured_datetime {margin: 6px 0px}

.featured_more {
float: right;
font-weight: bold;
margin-right: 20px;
text-decoration: underline;
}

.post_body_page ol, .post_body_single ol {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ol li, .post_body_single ol li {
list-style-type: upper-roman;
margin-left: 60px;
}

.post_body_page ul, .post_body_single ul {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ul li, .post_body_single ul li {
list-style-type: disc;
margin-left: 60px;
}

blockquote {
margin: 0px 30px;
padding: 20px;
border: 1px dotted gray;
font-style: italic;
}


/*================================================================
Site Structure
==================================================================*/

body {
font-size:100%;
line-height:1.125em;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #f0f0f0;
background-image: url(images/index/body.jpg);
background-repeat: repeat-x;
color: #7C7C7C;
}

#page_wrapper {
width: 976px;
margin: 0px auto;
position: relative;
}

#featured {
height: 230px;
margin-right: 3px;
margin-bottom: 30px;
border: 0px solid red;
padding: 15px;
background-image: url(images/index/featured.jpg);
background-repeat: no-repeat;
}

#header {
width: 667px;
margin: auto;
height: 109px;
background-image: url(images/index/header.jpg);
}

#container {
width: 990px;
margin: 140px auto;
font-size:0.875em;
}

#main_content_left_index {
width: 600px;
float: left;
}

#main_content_left {
width: 600px;
float: left;
}

#main_content_right {
width: 343px;
float: right;
}



#footer {
height: 250px;
padding: 130px 130px 50px 130px;
margin: auto;
clear: both;
background-color: #eeefef;
background-image: url(images/index/footer.jpg);
background-repeat: repeat-x;
background-position: top;
}

#footer_contents {width: 990px; margin: auto;}

#footer_left {width: 460px; margin: auto; float: left;}

#footer_right {width: 460px; margin: auto; float: right;}

/*================================================================
The columns
==================================================================*/

#first_column {
float: left;
width: 280px;
}

#second_column {
float: right;
width: 280px;
}

/*================================================================
The posts
==================================================================*/

.posts {
background-image: url(images/index/posts.jpg);
height: 333px;
width: 275px;
margin-bottom: 60px;
}

.post_header {
height: 38px;
width: 255px;
padding: 10px;
border: 0px solid red;
}

.post_body {
width: 255px;
height: 180px;
padding: 10px;
overflow: hidden;
font-size: .9em;
}


.post_footer {
height: 58px;
width: 275px;
margin-top: 15px;
}

.post_header_page, .post_header_single {
background-image: url(images/index/PostHeaderPage.jpg);
height: 38px;
width: 547px;
padding: 25px;
text-align: center;
}

.post_body_page, .post_body_single {
background-image: url(images/index/PostBodyPage.jpg);
background-repeat: repeat-y;
width: 547px;
padding: 0px 25px;
}

.post_footer_page, .post_footer_single{
clear: both;
background-image: url(images/index/PostFooterPage.jpg);
height: 90px;
width: 477px;
margin-bottom: 20px;
padding: 0px 60px;
font-style: italic;
}


.next_prev {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_posts.jpg);
width: 577px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}

.next_prev_comments {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_comments.jpg);
width: 535px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}



/*================================================================
The sidebars
==================================================================*/

.sidebar_header {
background-image: url(images/index/sidebar_header.jpg);
height: 91px;
width: 340px;
}

.sidebar_body {
display: block;
float: left;
margin:0 0 0px 0;
width: 290px;
padding: 25px;
background: url(images/index/sidebar_body.jpg) repeat-y;
}

.sidebar_bottom {
background-image: url(images/index/sidebar_footer.jpg);
height: 56px;
width: 340px;
clear: both;
margin-bottom: 40px;
}



/*================================================================
Sidebar Navigation
==================================================================*/

.sidebar_nav ul {}
.sidebar_nav li {}

.sidebar_nav ul li {
display: block;
padding: 4px;
border-bottom: 1px dotted #515151;
font-size: .8em;
}

.sidebar_nav ul ul li {margin-left: 10px; border-bottom: none; font-size: 1em;}
.sidebar_nav ul ul ul li {margin-left: 10px;}

.sidebar_nav {
margin-bottom: 20px;
}

.sidebar_nav ul {

}

.sidebar_nav a {display: block;
padding: 4px;
}

.sidebar_nav a:link, #navlist a:visited {
color: #666666;
text-decoration: none;
}

.sidebar_nav a:hover {
background: #d8d8d8
}


/*================================================================
Top navigation
==================================================================*/

#top_nav_menu {
position: absolute;
top: 132px;
left: 0;
width: 950px;
}

/***** drop menu *****/

#dropmenu, #dropmenu ul {
list-style-positionutside;
position:relative;
line-height:1.5em;
z-index:300;
width:100%;
font-weight: normal;
letter-spacing: .18em;
margin: 0px 0px 0px 0px;
}

#dropmenu a {
display:block;
padding: 5px 15px;
text-decoration:none;
color: #666666;
font-size: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: .18em;
}

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

#dropmenu li {
float:left;
position:relative;

}

#dropmenu ul {
position: absolute;
display: none;
width: 18em;
top: 1.9em;
left: 0px;
}

#dropmenu ul a {
background: url(images/index/dropmenu_bg.png)
}

#dropmenu ul a:hover {

}

#dropmenu li ul {
width:14.1em;
margin-top: 4px;
}

#dropmenu li ul a {
width: 250px;
height: auto;
float: left;
}


#dropmenu ul ul {
top:auto;
}

#dropmenu li ul ul {
left: 265px;
margin:0px 0 0 10px;
}

#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display:none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display:block;
}


/*================================================================
Categories Navigation
==================================================================*/

#main_categories {
margin: auto;
height: 20px;
width: 976px;
margin-bottom: 30px;
}

/* Horizontal Category List (frontpage) */

ul.horizontal_categories {
clear: both;
}

.horizontal_categories li {
display: inline;
background: url(images/index/cat_bullet.png) no-repeat right center;
font-size: 1.2em;
font-weight: bold;
letter-spacing: .08em;
}

.horizontal_categories a {
padding: 0px 25px;
}

.horizontal_categories a:link, .horizontal_categories a:visited {

}

.horizontal_categories a:hover {

}

i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this?

this is what my code looks like:

Code:

a:hover#index {
	background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
    background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
    background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
    background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
    background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
    background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
    background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
    background: url("./images/search-red.png") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search   {
	width: 86px;
	height: 27px;
	float: left;
	margin-top:6px;
	position:relative;
	left: 115px;

}

a#index {
	background: url("./images/home-grey.png");
}
a#design {
	background: url("./images/dande-grey.png");
}
a#howto {
	background: url("./images/howtobuild-grey.png");
}
a#installation {
    background: url("./images/installation-grey.png");
}
a#dean {
    background: url("./images/deansblog-grey.png");
}
a#forum {
    background: url("./images/userforum-grey.png");
}
a#plan {
    background: url("./images/planbike-grey.png");
}
a#search {
    background: url("./images/search-grey.png");
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div style="background-color: red;"><input type="radio" id="radio"></div>
</body>
</html>

Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides.

Are there any tricks to getting consistency?

Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE.

Here is the stylesheet:

PHP Code:
 body {
    background-color: #DECFEF;
}

.example
{
    background-image: url("images/example.gif"); 
    border-width: thin;
    border-color: white;
    border-style: solid;
    padding: 35px 35px 35px 35px;
} 





And here is the HTML file:

PHP Code:
<html>
<head>
<title>Chatterbox</title>
<link rel="stylesheet" type="text/css" href="/teststyle.css">
</head>
<body>
<table class='example'><tr><td>
  hello
</td></tr></table>
</body>
</html> 





All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet.

You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html


Any help is greatly appreciated

~j.

i'm trying this CSS Tab deelio, but I can't seem to get it right. I'm kind of new to this, but check out this page and tell me what I'm doing wrong. Thanks!

(URL address blocked: See forum rules)

Code:

<div id="s_site">
	<a href="#site">This site</a>
	<h2 id="site_h">About This Memorial Site</h2>
	<p id="site_p" class="tab_cont">This site is brought to you by the Royal Canadian Branch 3 Legion John Bernard Croak Victorian Cross.  In honor of those fallen and served in WW2.</p>
</div>

the h2 and p element are hidden using display:none; when I click on the anchor link i'd like them to apper using display:block; It seems like I may need to use javascript but I'd rther not use javascript at all, except for thos eunfortunate enough to still be using IE.

I can't figure it out I've tried amny thing that didnt work. I've been searching for a selector that will let me access these hidden elements but I can't come up with anything.

I half accomplished what I was trying but I can't get the changes to stick.

Thanks for reading

Was working on a new design for one of my sites today and when I inadvertently discovered using buttons as tabs, however...

I am more of a programmer than I am a designer. The tabs look differently in Firefox than they do in IE.

In IE, I give the currently tab more padding than the other buttons and those other buttons stay attached to the <div> below them.

In Firefox/Mozilla, the other buttons are raised up.

See here*

*You will notice that the Home page has rounded corners, while the About page does not; can't decide which one I like better

The other issue I have in IE is that when I button is being clicked/activated, it detaches itself from the <div> below.

--

Maybe a good time to also ask how I can accomplish something using div's or span's that I used to do with table's:

How would I have a 700px wide box, with a div at the top, split 50/50 so that I could have a small logo at the top left and a search box (on the same row) at the top right? I have always:
Code:

<table width="700">
<tr>
<td width="50%">logo</td>
<td width="50%" align="right">search box</td>
</tr>
</table>

--

One mo If I am using HTML 4.01 strict, can I still use: Code:

<td align="center" valign="middle">

or do I have to: Code:

<td style="text-align:center;vertical-align:middle">

Cheers!

I've found a number of great examples of how to do tabs with CSS (http://unraveled.com/projects/css_tabs/ being the one I'm working off of), but they all link to various other HTML pages. Does anyone know of a reasonably simple way to do them inline? (think www.johnkerry.com) I'm sure there's javascript involved, but does anyone know of a good resource on how to accomlish something like this?

Hello all -

I am trying to implement tabs to my forum, I currently have some on there but I like the looks better of the new ones that I am trying to get going. I find that when I get them working (using additional CSS as well as navbar/header edit) it will not work in all browsers. If I post the CSS as well as the navbar/header code would you be able to help me track down my issue?

EDIT - I was going to post screenshots but was not permitted

I have been monkying around all day with this code and can't seem to get it reversed correctly, so that all the tabs start on the right side instead of the left. I end up messing it up pretty badly and I can't seem to figure out where I am going wrong with it.... any help is appreciated.

The example can be seen he http://homelesspixel.de/tabs/

For ease of use I'll paste the HTML and CSS in one:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style type="text/css">

body {
	color: #333;
	background-color: #fff;
	padding: 20px 20px;
	margin:0;
	font: normal 11px helvetica, arial, geneva, lucida, sans-serif;
}

h1 {
	font-size:2em;
	font-weight:normal;
	margin:1em 0;
}

ul#topnav {
	margin:0 0 100px;
	padding: 0 0 0 12px;
	list-style: none;
	border: none;
} 

#topnav li {
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}
	
#topnav a {
	display:block;
	color:#444;
	text-decoration:none;
	background: url(images/lia.gif) no-repeat;
	margin:0;
	padding: 0.2em 2.4em 0.2em 36px;
	border-right: 1px solid #aaa;
	position: relative;
	font: bold 11px helvetica, arial, geneva, lucida, sans-serif;
}
#topnav a#a0 { left: 0px;}
#topnav a#a1 { left: -30px;}
#topnav a#a2 { left: -60px;}
#topnav a#a3 { left: -90px;}
#topnav a#a4 { left: -120px;}
#topnav a#a5 { left: -150px;}
#topnav a#a6 { left: -180px;}
	
#topnav a:hover {
	background: url(images/liahover.gif) no-repeat;
}

#topnav a.here {
	position:relative;
	z-index:102;
	background: url(images/liahover.gif) no-repeat;
	border-right: 1px solid #777;
	padding: 0.2em 1em 0.2em 35px;
	margin: 0 4px 0 0;
}
	
ul#subnav {
	position:absolute;
	z-index:101;
	margin: -1px 0 0;
	left: 10px;
	padding: 1px 0px 3px 30px;
	background: #bbb;
	border-top:1px solid #fff;
	border-bottom:1px solid #999;
	width: 720px;
}
	
#subnav li {
	position:relative;
	z-index:102;
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}
	
#subnav a {
	color:#fff;
	display:block;
	text-decoration:none;
	margin:0;
	padding: 2px 12px 2px 10px;
	background: transparent;
	background-image: none;
	border: 0 none;
}
	
#subnav a:hover {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
}

#subnav a.here {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
	margin:0;
	padding: 2px 12px 2px 10px;
}
	

</style>
<body>

<h1>Example of CSS-driven tabs</h1>

<ul id="topnav">
	<li><a id="a0" href="#">Home</a></li>
	<li><a id="a1" href="#">About</a></li>
	<li><a id="a2" href="#">News</a></li>
	<li><a id="a3" href="#">Proof</a></li>
	<li><a id="a4" href="#" class="here">Process</a>
	<ul id="subnav">
		<li><a href="#">Vision</a></li>
		<li><a href="#">Team</a></li>
		<li><a href="#" class="here">Culture</a></li>
		<li><a href="#">Careers</a></li>
		<li><a href="#">History</a></li>
		<li><a href="#">Sponsorship</a></li>
	</ul>
	</li>
	<li><a id="a5" href="#">Expertise</a></li>
	<li><a id="a6" href="#">Help</a></li>
</ul>

</body>
</html>

Hello,

I am having some problems with my code. I'm not able to insert these forms properly into these divs. I would like the forms to be placed within the tab (more or less centered), however, how it is now the form is half way in and half out of the tab. When I try and move the form over it distorts the tab image. Please help me fix this problem. I'm uncertain about what is wrong and how to fix it. Thank you in advance.


Code:

<head>

<style type="text/css">

body
{
    color: black;
}


/*Form Formatting*/

fieldset
{
   margin: 1em 0;
   padding: 1em;
   border: 1px solid #ccc;
   background: #000000;
}

legend
{
   font-weight: bold;
   color: #FFFFFF;
}

label
{
   display: block;
}

input [type="text"]
{
   width: 200px;
}

input.radio, input.checkbox, input.submit
{
   width: auto;
}

input.radio
{
   float: left;
   margin-right: 1em;
}

input.author:focus, input.email:focus
{
   background: #E9C2A6;
}

input[type="text"]
{
   border-top: 2px solid #999;
   border-left: 2px solid #999;
   border-bottom: 1px solid #ccc;
}

.required
{
   font-size: 0.75em;
   color: green;
}

.author, .email, .subscribe-yes, .subscribe-no, .checkbox/*.HTML_Box, .Plain_Text*/
{
   color: #FFFFFF;
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/

/*Form Placement*/

#Display_Name
{
   margin: auto 33% auto 33%;
   width: 150px;
   left: 100px;
}

#Details
{
   margin: auto 33% auto 33%;
}

#Subscription
{
   margin: auto 33% auto 33%;
   width: 150px;
}

#Mailing
{
   margin: auto 33% auto 33%;
   width: 180px;
}

#Submit_Subscription
{
   margin: auto 33% auto 33%;
}

#HTML_Box
{
   float: none;
}

#PText_Box
{
   float: right;
}
/*------------------------------------------------------------------------------------------------------------------------------------*/

/*Background Tab*/

/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2
{
   background: transparent url(../../Working/red_tab.php.png) no-repeat bottom right
}

.cssbox
{
   /* intended total box width - padding-right(next) */
   width: 250px !important; /* IE Win = width - padding */
   width: 320px; /* the gap on the right edge of the image (not content padding) */
   padding-right: 15px; /* use to position the box */
   margin: 20px auto;
}

/* set the top-right image */
.cssbox_head
{
   background-position:top right;
   /* pull the right image over on top of border */
   margin-right:-15px;
   /* right-image-gap + right-inside padding */
   padding-right:40px
}

/* set the top-left image */
.cssbox_head h2
{
   background-position:top left;
   margin:0; /* reset main site styles*/
   border:0; /* ditto */
   /* padding-left = image gap + interior padding ... no padding-right */
   padding:8px 0 0px 40px;
   height:auto !important;
   height:1%;  /* IE Holly Hack */
   font-family: Comic Sans MS, Arial, sans-serif;
}

/* set the lower-left corner image */
.cssbox_body
{
   background-position:bottom left;
   margin-right:25px; /* interior-padding right */
   padding:15px 0 15px 40px;  /* mirror .cssbox_head right/left */ 
}

</style>

</head>

<body>

<!--Tab-->
<div class="cssbox">
    <div class="cssbox_head">
        <h2>Mailing List</h2>
    </div>

<div class="cssbox_body">

<!-- Contact Info -->
<div id="Display_Name">

    <fieldset id="Details">
        <legend>Contact Details</legend>
        <!--Name-->
                
                <label for="author" class="author">Name: <em class="required">(Required)</em></label>
                <input name="author" id="author" type="text" size="25"/>
                
            
        <!-- E-mail Address-->
            
                <label for="email" class="email">Email: <em class="required">(Required)</em></label>
                <input name="email" id="email" type="text" size="25" maxlength="200"/>
                    
        <!-- E-mail Format-->
            <div id="HTML_Box">
                <p>
                    <input class="checkbox" id="HTML" name="HTML" type="checkbox"
                    value="HTML" />
                    <label>HTML</label>
                </p>
            </div>
            
            <div id="PText_Box">
                <p>
                    <input class="checkbox" id="Plain_Text" name="Plain_Text" type="checkbox"
                    value="Plain_Text" />
                    <label>Plain Text</label>
                </p>
            </div>
                    
    </fieldset>

</div>    
    
<!-- Subscription Question -->
<div id="Subscription">
<fieldset id="Mailing">
    <legend>Join Mailing List?</legend>
    <p>
        <input id="add-subscribe" class="radio" name="add" type="radio"
            value="subscribe" checked="checked" />
        <label for="add-subscribe" class="subscribe-yes">Subscribe</label>
    </p>
    
    <p>
        <input id="add-unsubscribe" class="radio" name="add" type="radio"
            value="unsubscribe" />
        <label for="add-unsubscribe" class="subscribe-no">Unsubscribe</label>
    </p>

<!-- Mailing List Submit Button -->
<div id="Submit_Subscription">
    <input id="enter" type="submit" value="Submit" />
</div>

</fieldset>
</div>

</div>

</div>


</body>

</html>


--------------------------------------------------------------------------------