Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

xhtml strict & span width 1

Status
Not open for further replies.
stormbind

stormbind

Technical User
Mar 6, 2003
1,165
GB
When I use the xhtml strict DTD, the browser ignores style="width:140px" and when I remove the DTD it renders it again.

Why?

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Sort by date Sort by votes
Then how can I position the elements as desired?

<div>
<span style="width:140px"></span><span>...</span>
</div>

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Upvote 0 Downvote
Nevermind, I used left:140px;

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Upvote 0 Downvote
Actually, that does not work! [sadeyes]

postion:absolute; is no good because positioning is dependent on resolution.

position:relative; is no good because that formerly width:140px element varies in length depending on the time of day.

This is frustrating.

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Upvote 0 Downvote
You got caught standing too close to the problem to see the solution. Why don't you tell us what you want to accomplish. Stacking fixed width elements next to each other makes me think of floats. Have you tried that?
 
Upvote 0 Downvote
There are many reasons for not telling someone exactly what is wanted...

1. feeling the topic is unworthy of public audience
2. realsing that a chunk of real-world code can bore anyone
3. wanting to solve the problem, not copy & paste it

What do you mean by floats? Position:absolute does not work because of too many unknowns (align:center), and FF (apparently) does not support expressions in CSS but maybe that is not true?

I could use JavaScript but this is part of the template and graceful degrigation is an issue.


--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Upvote 0 Downvote
What's wrong with using a table with the column width set to 140px?


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Imo, nothing wrong with that idea... but a lot of people are getting whiney about using tables for "non-tabular data" and I figured it might be best to migrate away from using them?

It gets worse: If you check the may edition of (Law Society) Gazette in the UK, some *mumbles* consultant wrote an article about how websites must adhere to DDA. Concerned solicitors have landed this on my desk. They think they have learned something "new" and are proud of their "technical" understanding: It is terribly frustrating to try and explain that it's already done [sadeyes]

I do not think said consultant realises what was inside her Pandora's Box. To really achieve DDA we need to support audio-output on web pages but she never mentioned that. This is tanjenial and dwarfs the tiny xhtml glitch currently facing me, but it is a genuine concern in maintaining old projects.

I'm threadjacking my own thread! LOL

Any other ideas besides the table? :)

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Upvote 0 Downvote
float: left | right | none are what allows you to postion block elements side by side. You also need to use a clearing div to break the float other wise some unexpected results can occur.

so this style and page will give what is a 3x3 table using CSS
Code: 
body {
	margin:0px;
	text-align:center;
}
#menu {
	position:relative;
	width:90%;
	margin:0px auto 20px auto;
}
#menu .row {
	position:relative;
	clear:both;
}
#menu .cell {
	position:relative;
	width:33%;
	float:left;
}

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="menu">
<div class="row">
<div class="cell">Some Text</div>
<!-- cell -->
<div class="cell">Some Text</div>
<!-- cell -->
<div class="cell">Some Text</div>
<!-- cell -->
</div>
<!-- row -->
<div class="row">
<div class="cell">Some Text</div>
<!-- cell -->
<div class="cell">Some Text</div>
<!-- cell -->
<div class="cell">Some Text</div>
<!-- cell -->
</div>
<!-- row -->
<div class="row">
<div class="cell">Some Text</div>
<!-- cell -->
<div class="cell">Some Text</div>
<!-- cell -->
<div class="cell">Some Text</div>
<!-- cell -->
</div>
<!-- row -->
</div>
<!-- menu -->
</body>
</html>

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
Oh my stormbind, I guess we can scratch that 3rd point of your reasons for not telling us exactly what you want.
 
Upvote 0 Downvote
Are you pre-judging me? Can you see what I typed into the source? ;)

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Upvote 0 Downvote
I am saying that I gave you exactly the same solution as Chris (using floats) and you were not really satisfied, while Chris' code seemed to have worked for you. The only difference between his and mine response was that he gave you the actual code, while I only hinted on how to do it. Something you claim you wanted.
 
Upvote 0 Downvote
I did not understand that float: was a property, I thought you meant floating one element above the other as in a z-index :)

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ThomasJSmart
  • Locked
  • Question
absolute parent, children that expand width of parent up to max.
Replies
12
Views
2K
ThomasJSmart
ThomasJSmart
antonyx6666
  • Locked
  • Question
background image as page width
Replies
3
Views
122
antonyx6666
antonyx6666
cbsarge
  • Locked
  • Question
Checkbox to change width of body background image?
Replies
4
Views
115
vacunita
vacunita
jmeyer9807
  • Locked
  • Question
xhtml strict form validation issues 1
Replies
6
Views
119
jmeyer9807
jmeyer9807
ThomasJSmart
  • Locked
  • Question
XHTML or XML for SEO ?
Replies
11
Views
228
ChrisHunt
ChrisHunt

Part and Inventory Search

Sponsor

Back
Top