CSS - How Am I Doing? Accessibility & Design Concerns

The Q tag is supposed to be used for inline quotations, whereas the BLOCKQUOTE tag for longer quotations. The Q tag is suppose to render quotation marks around the enclosed quote, but does not do so in IE. As far as I known (have read in various articles), IE is the only browser that does not enclose the quote with quotation marks.

I have a single-lined quote I want to display and was hoping to use the Q tag as I don't find it neccessary to use the BLOCKQUOTE tag since it's only a 5-word sentence and the BLOCKQUOTE does not render quotation marks around the data in any browser (instead indents both the left and right margins).

If I were to forget about both tags competely and just enclose my quote with quotation marks it would 'appear' correct, though it does not adhear to accessibility guidelines as a screen-reader browser like JAWS would not realize it is actually a quotation and would read it the same as any other text enclosed in a P tag.

If I were to use the Q tag and add the quotation marks, IE would look right, but in all the other browsers there would be double quotation marks.

Should I de-style the Q tag so the quotation marks do not show? If that is possible I could continue using the appropriate tag and just add the quotation marks manually but it would still look right on all web browsers (including text-only browsers), and it would be read properly. Though, is that even possible? and if it were, is it backwards-compatible or will it only work on recent web browsers?

Another alternative would be to use the BLOCKQUOTE and add the quotations manually and style the BLOCKQUOTE tag accordingly... but again, this is meant for longer quotations, but may be the only reasonable alternative?

OR

style the Q tag to have quotation marks before and after in IE, but IE doesn't support 'content:' correct?

Does anyone know of a solution? or which of my 'fixes' would you suggest?

Thank you.

Edit I was thinking about this more and I think I came up with a pretty good solution:

Code:

q:before, q:after { content:''; }

IE already doesn't display the quotes so it doesn't matter that it doesn't support the above code, the rest of the browsers do (i think?), so I can continue to use the Q tag, whilst adding the quotation marks manually.

Good fix?

I'm designing a webpage that uses an image for the header/logo. i need the page to have certain things:

(1) it needs to be accessible for screen readers
(2) it needs to have two stylesheets - the main one <link href= ............. media="screen"/> + one that enables printing of text only, without images e.g. <link href= ............. media="print"/>

To get (1) i need to have the alt="whatever" attribute in the html, but i can only do that if i have img src="xxxxx" in the html.
To get the print-text-only style sheet i need to have the image in the main css stylesheet e.g. background-image:url (xxx/xxx); instead of having img src="xxxxx" in the html.

So my question is: how do I get alt="whatever" if there's no img src="xxxxx" in the html? Or what's the alternative?

I hope this makes sense to you, 'cause I've been going round in circles with it!

TIA,
jifjaf

Hi guys,

For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF).


Thank you

I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: body background: fixed full page image banner: fixed, 100 pixels high, full-width, transparent background nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background footer: fixed, 30 px high, full width, transparent background mockup:

Here is as far as I could get in the actual design:
web page attemp

It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side.

http://www.members.shaw.ca/welcomehere/test.htm


please help.

Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work.

What does everyone else usually do?

I am trying to improve design of most popular div in one section (http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=3). I designed something in photoshop but I am having hard time wth integrating it(http://www.pearl.ru/isdunyasi/newtable.gif). I cannot figure out how to do it because if I set what I designed as a background there is big chance texts will overflow as that area gets its values from the database.

Code:

#innersubcontentpopular{
	float:right;
	width:300px;
	height:450px;
	background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#innersubcontentpopular h1{
	padding:0px;
	margin-bottom:5px;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
}
#innersubcontentpopular h2 {
	padding:5px 2px 5px 2px;
	font-size:12px;
	font-weight:bold;
	color:#aaaaaa;
}
#innersubcontentpopular p {
	padding:2px; 
	margin:0; 
	font-size:12px;
}

Hi,
How do i make a table in which "title" is in the middle of the table
and "help" is on right side.


<table class="" width="700">
<tr><td colspan="2" align="center">

<span>title</span><span>help</span>

</td></tr></table>

something like this:
------------------------------------------------------
|...................................title...........................help |
------------------------------------------------------

Thank you.

OK - this may sound a bit cheeky but I have been looking everywhere for a table-less design which will work in the 3 major browsers (Opera, Firefox, IE) I am looking for a 2 column layout (left column about 130 px wide) and with a header and footer - I can't find anything that works for me in all browers (I know M$ haven't made IE fully compatible ) but if anyone knows where I can get this popular and simple structure I would be most grateful,
thanks, j

Well, many of you have seen me floundering around this CSS stuff. I developed 2 demos for a team of people to review and damn if they didn't want functionality combined into one site... I have words that discribe my reaction!!..

Anyway I'm building this site using a new 3 column example I found at Skidoo or something like that. Seems to be working well so far with my columns staying the same height.

As I go I'm trying to maintain the functionality in both IE and FF and frankly having a bit of trouble. Seems that the code and changes looks fine in IE but there are 3 primary areas I cannot seem to fix in FF.

*The white line between 'the header' and 'the horizontal nav' blocks.
*The background color for the left and right content areas is not coming through.
*And in the Left content area there are a lot of links with the UL set to none and a reduced margin for alignment purposes. In FF they are not over to the Left like I'd like

If you look at this example in IE it is as I'd like it to appear. In FF the above are an issue.

Any help would be greatly appreciated even if its a link to read this..... sort of thing.

Thanks for the help.

The site

The CSS

Also, em is fairly new to me in this style, it seems to be very good especially when adjusting the font size. Is this the better to use standard than px? Does anyone know where I can find a chart comparing the two? I have been using px for sometime and have to fiddle with em to make it all work.

Thanks again for any assistance.

Hey everyone,

I'm new to CSS, but now web design. I could find a way to build this design in tables, but thought I might try the CSS thing. I've been reading a bunch and have a general plan, but any advice on where my plan could be improved or if I should stick with tables would be great.

hutec-inc. com/personal/css.gif

I am new to web development and am in the process of learning XHTML, CSS, PHP and SQL. I need to know if i am making any major mistakes in my approach to making this site as far as CSS is concerned. The site is a simple file browser which displays files and their details in a table with a vertical navigation bar.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li><a href="/dotastats">DoTA</a></li>
	<li><a href="/phpmyadmin">phpMyAdmin</a></li>
	<li><a href="upload.php">Uploads</a></li>
</ul>
<div id="content">
	<table>
	<thead>
	<tr><td><a href="upload.php?sort=filename">Filename</a></td><td><a href="upload.php?sort=ext">Type</a></td></tr>
	</thead>
	<tfoot>
	</tfoot>
	<tbody>
	<?php
	require("functions.php");
	
	updateFiles();		

	$page = $_GET['page'];
	$sort = $_GET['sort'];
	
	if($sort == "")
	{
		$sort = "ext";
	}

	$files = getFiles($sort);
	$i = 0;
	$colours = array('even', 'odd');

	foreach($files as $v)
	{
		if($i >= ($page * 20) && $i < (($page * 20)+20))
		{
			echo
			'<tr class="'.$colours[$i % 2].'">
			<td><a href="files/'.$files[$i][0].'">'.$files[$i][0].'</a></td>
			<td>'.$files[$i][1].'</td>
			</tr>';
		}
		$i++;
	}
	?>
	</tbody>
	</table>
	<?php
	echo "<br/>";
	$pageCount = $i / 20;
	
	for($i = 0; $i <= $pageCount; $i++)
	{
		echo " [";
		echo "<a href='upload.php?page=$i&sort=$sort'>$i</a>";
		echo "] ";
	}
	?>
</div>
</body>
</html>

Edit:

Code:

html, body {
	margin: 0;
	padding: 0;
}
a:link {text-decoration:none}
a:hover {text-decoration:underline}
#nav {
	background: #9966CC;
	height: 30px;
	border: 1px dotted #000000;
	margin:0;
	padding:0;
	text-align: center;
}
#nav li {
	display:inline;
	padding:0 10px;
	margin:0;
	font-size: 14;
}
#header {
	background: black;
	height: 100px;
}
#footer {
	background: black;
	height: 100px;
}
#content {
	width: 800px;
	margin: auto;
	padding: 10px;
}
#upload {
	text-align: center;
}
table {
	font-size: 14;
}
table thead tr {
	background-color: #6699FF;
	font-weight: bold;
}
table tbody td {
	width: 400px;	
}
table tbody tr.even {
	background-color: #B0C4DE;
}
table tbody tr.odd {
	background-color: #CAE1FF;
}
table tbody tr:hover {
	background-color: #9999FF;
}

I would like to be able to have headers for the smaller divs in each column similar to the one I have on the upper left hand side close to the nav bar. The question is this: How do I attain this effect with the header streched across the width of the containing div?

http://www.nevertap.com/float/

Do I use an image? Do I use tables?

I would just 'go for it' and try them all out, but Ive been coding too long today, I want to see what others think so im not making a total stab in the dark.

Ok, trying to use CSS to mirror the UNLV design header.

examples of the design:

http://hotel.unlv.edu/
http://alumni.unlv.edu/

etc

I basically want the top header (black/red backgrounds)

I am trying to do it without using tables to do the layout, but I can't seem to figure out how to do it.

here is what I got:

http://projects.whiteazn.com/unlvmentor/

in firefox, looks fine, except the black background doesn't seem to go all the way over.

in IE, works fine, but the red background seems to get bigger (the height is bigger) and the search box seems to go to the top

any ideas? (I haven't tried to float the red background part yet)

Hi,
I have a table, which contains div. The Div contains "ul" and "li" elements. Currently my page looks awkward without any css designs.
Could somebody help me with some css designs, so that page looks good.

Thank you.