CSS - Hints, Tips Needed - Css, Xhtml, Vb, Etc.

Hey--

Are there are good resources or tips for developing a site to work on desktops and on mobile devices? I'd like to make a new site that works great in as many places as possible and need to know what restrictions I encounter and best practices and such.

Thanks!

PHP Code:
#searchBox {
    float:right;
    margin:0em;
    padding:0em;
    margin-right:0.2em;
    clear:right;
    background-image:url(/images/site/backgrounds/searchBox.jpg);    
    /*border:black solid 1px;*/
}
#searchBox input {
    margin:0em;
    padding:0em;
    background-color:#d2c5a2;
    
}
.submit {
    background-color:#6F5F42;;
    color:#483e2b;
    font-size:smaller;
    font-weight:bold;
    margin:0em;
    padding:0em;
} 





and html

PHP Code:
<div id="searchBox">
            <form action="search.php" method="post" style="margin:0em; padding:0em;">
                <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;">
                    <label>What are you shopping for?</label><input type="text" name="search" size="14"/>
                    <input class="submit" type="submit" name="submit" value="Search" />
                </fieldset>
            </form>        
        </div> 





i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!!

also is there anyway to make sure that the font sizes are same/similar in both IE and FF?

http://www.zahra-zahra.com/fullpage.html


EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box..

Hi,

I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox.

Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't.

My question is would I be better developing separate CSS files for each browser type and use a script to determine which one?

If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful.

Regards

Paul

look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated.

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

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

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 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!

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'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 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.

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

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.

Hi All.

I've had a problem with a website for the last few days, i've done the design, and the html side is no problem in a table layout, but i'm trying to get it working using DIVS and pure CSS. I'm attaching an image of the layout.

URL

Look at the image, i want the design, aligned center and vertically in the middle. Here is a key to each section.

Yellow, Text would be in this section.
Red, Bar that goes the width of the screen.
Green, The Menu, Home | About etc etc etc (the red bar is actually the menu bar but only used for a menu where the green is)
Blue, This is an image, that over laps the menu bar.
White, this is just where the copyright notice goes.

If anyone could knock up a quick template i'd be extremely grateful, that is ofcourse if a layout like that is possible with DIVS etc.

Thanks people.

OK, I've been pulling my hair out here. I've been googling around for a couple days now trying to find some solution to this....

I have been crunched by what I think is a nasty little bug within IE6 when running with a DocType of XHTML 1.0 Transitional.

Observe he
http://www.drcwbt.com/codetests/scrolltest.htm

My problem:
The horizontal scrollbar. It's nasty. I need to get rid of that puppy. Only happens on IE6 AND when running XHTML DocType.

My attempted (and failed) solutions: My Googles led me to what looked like a similar bug in IE 5 Mac. Unfortunately, those solutions don't help me here Addition of MS only "overflow-x:hidden" property. While this does get rid of the scrollbar, it also chops off the rightmost edge of the content within the DIV.