CSS - Sliding Doors With "a" Element As Active

I know that this is probably a simple solution, but I have been looking at the coding so long I cant figure it out. What we are trying to do is this. We wanted to create a FAQ page that was just a little bit different than the norm, so instead of just having links, we wanted links, that if clicked would open under the question with the answer. I found some code online and now cannot remember where I got it, for a horizontal menu using only css. I altered it some and got it to work correctly in IE. I know that this is probably because IE allows major screw ups, but most of the users are IE. Foxfire on the other hand does not show the same way. I can handle it not behaving the same, if I could just get it to work at all. The code is located at sky.prohosting.com/jade1977/htmlFiles/faq.shtml
If someone can alter this to work in mozilla or give me alternate code that work similar I will be yours for life.
Thanks!!!!!!!!

Please go to this page -

http://www.pacunionsonoma.com/real-estate-agent.asp?realtor=51

On the top right click on Active Listings

Then watch the top agent image, title, and intro text. It is out of place BUT only until the page finishes loading, then it "jumps" in place...

In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns.

With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too.

But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript.

I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical?

I am constructing a website using the sliding doors navigation (http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/). I have gone through both articles to successfully create the sliding doors naviagiton that I require.

My header image that I wish to place behind the navigation is 780px wide by 263px high. Therefor, I will be placing this navigation at the bottom (baseline) of this image.

I have increased my header div size to fit the image (780px x 263px). Then I have padded the navigation to try to make it position on the bottom of the image (padding-top: 236px). Unfortunatly, doing this give a 1px padding difference for IE and Firefox. IE shows it up fine, but Firefox does not. Firefox makes it look like its spaced 1px to many. If i decrease the padding to 235px, Firefox looks fine but IE displays it with 1px to less...I dont want to have to result to browser dependant css, but all hacks are welcome. Heres the code:

Code:

body {
	text-align: center;
	background-color: #7999E4
	}
#header{
	width: 780px;
	background: url('images/head.gif') repeat-x bottom;
	font-size: 93%;
	line-height: normal;
	height: 263px;
	padding: 0;
	margin:0;
	border:0;
	}
#main {
	background-color: #ffffff;
	width: 780px;
	height: 500px;
	}
#nav2 {
	background-color: #e7e7e7;
	width: 100%;
	border-bottom: 1px solid #000;
	height: 20px;
	}
#header ul {
	margin: 0;
	padding:0;
	padding-top: 236px;
	padding-left: 10px;
	list-style: none;
	}
#header li {
	display:inline;
	margin:0;
	padding:0;
	}
#header a {
	float: left;
	background: url('images/left_both.gif') no-repeat left top;
	margin: 0;
	padding: 0 0 0 9px;
	border-bottom: 1px solid #765;
	text-decoration: none;
	}
#header a span{
	float: left;
	display: block;
	background: url('images/right_both.gif') no-repeat right top;
	padding: 5px 15px 4px 6px;
	font-weight: bold;
	color: #765;
	}
	/* Commented Backslash Hack
	hides rule from IE5-Mac \*/
	#header a span{float: none;}
	/* End IE5-Mac hack*/
	#header a:hover span{
		color: #333;
		}
#header #current a{
	border-width: 0;
	background-position: 0% -150px;
	}
#header #current a span{
	background-position: 100% -150px;
	padding-bottom:5px;
	color: #333;
	}
#header a:hover {
	background-position:0% -150px;
	}
#header a:hover span {
	background-position:100% -150px;
	}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link title="Style" href="style2.css" type="text/css" rel="STYLESHEET">
</HEAD>
<BODY>
<center>
  <div id="header">
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li id="current"><a href="#"><span>Properties</span></a></li>
      <li><a href="#"><span>Quick Searches</span></a></li>
      <li><a href="#"><span>Holidays</span></a></li>
      <li><a href="#"><span>Contact</span></a></li>
    </ul>
  </div>
  <div id="main">
	<div id="nav2"></div>
  </div>
  <div id="footer">

  </div>
</body>
</html>

I am baffled on this one, please visit http://osake.garychus.com/menu.asp and look the main menu. I have this in the head code -

a#nav_menu{
color:#f00 !important;
}

but for the life of me it is not working...

I'm using the CakePHP framework to build my site.

I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width.

Here's what it's supposed to look like.
http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user..

Here's what I currently have.
http://planet-rpg(dot)com

Here's my coding.

html
Code:

<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
      <title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
      <?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
  <div id="frame">
     <div id="container">
       <div id="main_content">
            <p>Content area</p>
       </div>
     </div>
  </div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>

css
Code:

html {
	background: #2b435d;
}

html, body {
	margin: 0;
}

body, table {
	color: #303030;
	
}

img { border: 0; }

#body {
	background: #d8dde8;

	padding: 0 0 16px;
}

#page-wrap {
	min-width: auto;
	margin: 10px auto;
	}

#frame {
    margin: 0 auto;
    padding: 0px 1170px 0px 220px;
    margin-top: -17px;

}
#main_content {
	background-color: #fff;
}


#header {
	background: url("../img/header.png") repeat-x bottom left;
	height: 64px;
	margin-top: 36px;
}
#navigation {
   background: url("../img/navigation.png") repeat-x bottom left;
   height: 31px;
   margin-top: -20px;
   font-family: "Arial", sans-serif !important;
   font-size: 14px;
   color: #fff;
   text-shadow:-1px -1px 0 black;
   list-style-type: none;
   padding:1px 5px 1px 220px;
}
#navigation li {
	float: left;
}

#navigation li a {
	border-left: 2px solid #303030;
    text-shadow:-1px -1px 0 black;
	color: #D0D0D0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;

	display: block;
	height: 21px;
	padding: 6px 12px 1px;
}

#navigation li a:hover {
	color: white;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first {

	padding-left: 236px;
	margin-left: -236px;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first a {
	background: url("../img/cursor.png")bottom center no-repeat; height:24px;
	color: #6193c7;
	border: 0;
	text-shadow:-1px -1px 0 black;
}

#logo {
	width: 166px;
	height: 50px;
	margin-top: -32px;
	margin-left: 20px;

	position: absolute;
	z-index: 2;
}

#footer {
	background: #607080 url("../img/footer.png") repeat-x;
	height: 60px;
	padding: 30px 0;

	clear: both;
}

#top_bar {
	background: url("../img/top_bar.png") repeat-x bottom left;
    height: 36px;
	font-family: "Arial", sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;

    height: 36px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed.

Hope someone can help me with my question.

Please go to www dot boatgofast dot com in IE8

Keeping mouse off the screen page area, refresh the screen.

Then notice when moving mouse over the screen look how the navigation "jumps" to the left one time.

It does not do this in FF or Chrome and is driving me crazy.

Thanks for any help.

Tom

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

I have a very simple question:

I have this html code:
Code:

<div id="text">
<p><a>text</a></p>
<p><a class="red">text</a></p>
<p><a>text</a></p>
</div>

And this CSS style:
Code:

.red {  color: red;  }    
#text a{  color: blue;  }

I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side.

Hi guys!

Let's say I have this IN BODY directly:

Code:

<div id="top_section">
...
</div>

<ul id="menu">
...
</ul>

Or should I do it like this:

Code:

<div id="top_section">
...
</div>

<div id="menu">
<ul>
...
</ul>
</div>

UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??)

Thank you

Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case,
which CSS does not recognize? If so, is there a way to disable this feature?
What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great.
Or, can we simply get rid of the height and width calls in "img src=" links?
Thank you for any attention to this.
Ed