CSS - Css For Central Xhtml Pulling?

I am trying to create a simple horizontal list menu on this page.(link: http://northshorewebdesign.net/testsite/) This is the menu under the slideshow. When I add the menu, the menus above get messed up. I tried changing margin, padding etc but the other menus get mesed up. The site looks ok in IE but it looks bad in FF and Opera. Here's what I am trying to achieve(Link: http://webone.mcaec.org/wordpress/)
Here's the code I'm using:
Code:

.homepage-sub-menu {width: 960px; height: 70px; background-color:#00CCFF; position: relative;}
.homepage-sub-menu ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;}
.homepage-sub-menu li {float: left;}
.homepage-sub-menu li a:link,a:visited {display: block; width: 192px; font-family:Calibri, Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; padding-top: 10px;}
.homepage-sub-menu li a:hover {text-decoration: underline;}

Any help or suggestions would be appreciated

I'm using margin:auto; to center my pages. I've got an image on the left side, so I pad the write and then do the center on teh whole container.

It works great all the pages of my site except for one.

http://www.sexy-tan.com

but when you go to the cart page to view your cart
http://www.sexy-tan.com/cart/cart.php

it breaks and the page floats left. I"m using the EXACT same css for all the pages and the same layout, I"ve copy and pasted a working hierarchy from another page and still no dice. Any ideas?
Also, it works just fine in firefox, but messes up only in IE.

Hi all,

I am having an issue with IE7.
www[dot]novakwebsales[dot]com/help/index6.html

When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again???

It works fine in Firefox...

Any ideas?

Thanks in advance,
Tbone

So I'm trying to pull info from a mysql DB and display the contents to a page. Basically, the database has 35 products which I want to display in rows of 5 with the image showing, and right beneath, the title of the product. I'm trying to use divs to display these items one after another, until it counts to 5 and then starts a new line. I'm not sure what I'm doing wrong (or missing), but on the 1st row (and various other rows, there are 5 per row.. However, there are other rows that will show any other number of items... mostly right justified.

I'm sure this will be simple enough of a solution, but here's what I've been using:

PHP Code:
 $sql = "SELECT * FROM `products`";
$result = mysql_query($sql, $conn) or die(mysql_error());
$i == 0;

while($row = mysql_fetch_array($result)) {
  extract($row);
  $i ++;
    $image_loc = "images/products/" . $image;
  $j = $i/5;
    $display .= "<div style=\"width:150px; float:left; padding-bottom:60px; padding-left:15px; padding-right:15px;\"><img src=\"".$image_loc . "\" style=\"width:100px;\"><br />" . $item_name . "</div>";
  if (is_int($j)) {
    $display .= "<div clear:both;></div>";

    } else {

    }
} 





I have tried with and without the if statement, and with/without the clear:both. The if statement is there to determine if the count has gotten to 5 so that it can start a new line.

Thanks.

Hello,

I am working on a site. theweedkiller dot com

I have 3 links which are being laid out using a <ul>

The problem is the margin between home and service is fine, but the margin between services and contact seems to be double the size. I have tried adding display:inline; and it seemed to do nothing. I am getting this problem in Chrome, Firefox, and IE8. I am using a CSS reset too.

Heres is the HTML I am using -

<div id="nav">
<ul>
<li> <a href="index.html" id="current">Home</a> </li>
<li> <a href="services.html">Service</a> </li>
<li> <a href="contact.html">Contact</a> </li>
</ul>
</div> <!--end of nav div-->


Heres is the CSS I am using -

#nav ul {
margin-left:370px;
list-style-type:none;
}

#nav ul li {
float:left;
display:inline;
}

#nav ul li a {
font-family:"Myriad Pro", Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#302013;
padding:25px 50px 5px 50px;
background-image:url(images/nav.png);
background-repeat:no-repeat;
text-decoration:none;
display:inline;
margin-right:10px;!important
}

#nav ul li a:hover {
font-family:"Myriad Pro", Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#fff;
background-image:url(images/nav-over.png);
background-repeat:no-repeat;
text-decoration:none;
}

#nav #current {
font-family:"Myriad Pro", Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#fff;
background-image:url(images/nav-over.png);
background-repeat:no-repeat;
text-decoration:none;
}

I have no clue why this is happening. Any help would be useful.

Thanks!

I hope one of you can help, as this is driving me mad.
I've got a div that I'm using to display a background colour that has a fixed width and height="100%" (I'm having a problem with the hieght as well but I'm confident I can sort that), as soon as I change the declaration at the top of the page from the HTML 4.01 Transitional to the XHTML 1.0 Transitional the div disappears, why?
Cheers,
Ellroy

Hi,

I want to validate my page to XHTML 1.1, but to do that I need to remove border="0" (Only used on two header images).

I have tried putting border-style:none in my CSS in EVERY place I could think of, but it just doesn't work.

My css is he
http://www.planetphillip.com/style.css

One other thing, when I remove the border="0" code, IE6 vertically re-aligns the header images. Would somebody be kind enough to explain why.

BTW the site in question is:
http://www.planetphillip.com/

TIA
Phillip

I am developing websites using ASP.NET and C# for the code-behind.

I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid.

IE:

ASP.NET automatically renders this piece of code everytime the page is rendered:
Code:

<script language="javascript">
<!--
	function __doPostBack(eventTarget, eventArgument) {
		var theform;
		if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
			theform = document.forms["frm"];
		}
		else {
			theform = document.frm;
		}
		theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
		theform.__EVENTARGUMENT.value = eventArgument;
		theform.submit();
	}
// -->
</script>

That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>.

There are many other instances of this that I won't go into detail.

In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second.

My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant?

on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$

thanks!

I am building a new navigation menu which works fine as you can see below:
http://www.hotlinkhosting.com/test/menu.php

However, the following version does not:
http://www.hotlinkhosting.com/test/menu.php?.

The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help.

Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors.

Hello,

I was just wondering how XHTML and CSS works within data-driven websites. I am new to developing database driven sites and need to develop one that uses XHTML and CSS formatting for content as this is what the company I work is aiming towards, due to web accessibility requirements. Does anybody know of any good books/resources that cover developing database driven (php/mysql) websites and implementing XHTML/CSS from within these sites.

Would I be right to say that an area for the database content is created in the page which is written in XHTML? if this is correct does this area link to the CSS?

Any help would be gratefully appreciated....

Thanks,

Andy

I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately...

I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it.

The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing.

See the following to understand my situation.

EDIT: Validation of my pages template in html format.

- yay! it validates as XHTML 1.1

EDIT: Validation of my pages stylesheet

- yay! it validates as CSS 2.0

EDIT: Validation of them both together returns the following:

- Boooo! It won't validate and also tells me:

Code:

"Please, validate your XML document first!

Line 2

Column 3

The markup declarations contained or pointed to by the document type declaration must be well-formed. "

I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS?

Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important.

I've seen several examples of how to emulate frames using CSS, but I haven't seen anywhere explain how to create "frames" without having to add the entire frame code to every page in which it appears. With frames, I used to be able to create a menu which would appear throughout my site. I would modify the one, single menu.html file, and the changes would be visible throughout the site. How can I do this using the CSS-emulated frames?

Thanks

Currently, I'm working on an XHTML home page. After PHP, this is the result:
index.php Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<meta name="Author" content="Neil E. Hodges" />
	<meta name="Description" content="A site about the Kamakura Era" />
	<link rel="stylesheet" type="text/css" href="kstyle.css" />
	<title>index</title>
	<script type="application/x-javascript" src="switch.js" />

	<title>frames</title>
</head>
<body>
<div id="top">
<form id="switch" name="switch" action="">
	<input type="button" onclick="ch('left');" id="toLeft" value="To Left" disabled="disabled" />
	<input type="button" onclick="ch('right');" id="toRight" value="To Right" />
</form>
	<h1>Kamakura Era</h1>
</div>
<div id="sidebar" class="leftside">

	<a href="index.php" title="Home">Home</a>
</div>
<div id="main">
	<h2>Main</h2>
	<h3>H3</h3>
</div>
</body>
</html>

kstyle.css Code:

@charset "UTF-8";
div#top {
	width:100%;
	display:block;
	border-bottom:2px solid rgb(0,100,0);
	height:10px;
	height:4em;
	background-color:rgb(255,255,240);
}
div#top h1 {
	display:block;
	text-align:center;
	font:bold italic 3em/1 'Lucida Calligraphy', 'URW Chancery', 'Times New Roman', 'Nimbus Roman', 'Serif';
	width:80%;
	color:rgb(250,200,50);
}
form#switch {
	display:block;
	background-color: rgb(100,100,0);
	float:right;
	width:10%;
	height:3em;
}
form#switch input {
	display:block;
	margin:1%;
	height:48%;
	width:98%;
}
div.rightside {
	float:right;
	text-align:left;
	padding:1% 3% 1% 1%;
	border-left:1px dashed rgb(0,100,0);
}
div.leftside {
	float:left;
	text-align:right;
	padding:1% 1% 1% 3%;
	border-right:1px dashed rgb(0,100,0);
}
div#sidebar {
	width:15%;
	min-height:100em;
	background-color:rgb(240,240,255);
}
div#sidebar a {
	color:rgb(150,0,50);
	font:italic normal 1.1/1 'Nimbus Roman', 'Bitsream Charcter', 'Times New Roman', 'Computer';
	text-decoration:none;
	display:block;
	padding:2%;
	width:96%;
}
div#sidebar a:hover {
	color:rgb(150,75,200);
	font-weight:bold;
	text-decoration:none;
	border:0.5px solid rgb(150,75,50);
	margin-bottom:1.5em;
}
div#sidebar a:visited {
	color:rgb(50,75,150);
	text-decoration:underline;
}
div#main {
	padding:1em;
	width:85%;
	min-height:100em;
}
div#main h2 {
	color:rgb(0,100,200);
	font:italic bold 2.5em/1.1 'URW Bookman L', 'Times New Roman', 'Courier New', 'Sans-Serif';
	text-align:center;
	text-decoration:underline;
}
div#main h3 {
	color:rgb(175,0,50);
	font:bold normal 1.75/1.1 'Utopia', 'Lucida Handwriting', 'Serif';
	text-indent:5em;
}

switcher.js Code:

function ch(dir)
{
	if(dir == 'right')
	{
		document.getElementById("sidebar").setAttribute("class", "rightside");
		document.getElementById("toLeft").disabled = false;
		document.getElementById("toRight").disabled = true;
	//	document.getElementById("toLeft").setAttribute("disabled", false);
	//	document.getElementById("toRight").setAttribute("disabled", true);
	}
	else if(dir == 'left')
	{
		document.getElementById("sidebar").setAttribute("class", "leftside");
		document.getElementById("toRight").disabled = false;
		document.getElementById("toLeft").disabled = true;
	//	document.getElementById("toRight").setAttribute("disabled", false);
	//	document.getElementById("toLeft").setAttribute("disabled", true);
	}
}

If you enter all of these into their respectful files, except index.php into index.xhtml, there's a little white above the top of the page. I want to get rid of this margin. Can anyone help?

Also, this is mainly a problem in Firefox, since IE doesn't have XHTML support.

In my ongoing project I am making a complex fixed footer that has downloadable resources. I am placing three social network 64x64 thumbnails linking to those sites side by side.

The question I am conflicted with is should I make the images available in the xhtml mark up between the <li> tags or should I create images in the css as separate divs inside the footer with floating properties so that they line up next to each other?

I know it is a matter of file size vs preference but in this case it seems there would be less code all around by placing it in the <li> tags in the xhtml and styling the <li> as inline rather than creating three separate divs and styling those in the css that goes along with it. Or is there an easier way entirely?

Thanks for your thoughts
LB

I am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css


PHP Code:
 h2 {border-top:1px solid #4D65A0} 







I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in.

new line: slash_blue_mw.gif

sorry posted in the wrong spot b4