|
| |
|
|
phazei
Posts: 7
Joined: 8/23/2005
Status: offline
 |
<span> and element 'width' ignored in FF? - 8/23/2005 14:28:42
I haven't done any web design in a while (read years) and I'm just
familiarizing myself with div tags and css. I thought I had a pretty
good grasp on it, but I got stuck and google hasn't helped.
I'm working on
http://badasstutors.com/ but when I made
http://badasstutors.com/links.htm and
http://badasstutors.com/apply.htm
I used span's instead of div's for most of it because they were
inline and I needed to line some stuff side by side.
It works beautifully in IE, but firefox seems the throw it up.
(see bottom of links page).
For some reason FF is ignoring the 'width' element in everything
except div's. It won't let me make an inline frame with span.
Also I added a 'width' to the <B> tag in my declarations at the
beginning and it doesn't show up.
What am I doing wrong for it to not work in FF? Any other way
I should do it? I tried using div's with float left/right... but they
ended up weird. Can I make div work inline?
Thanks,
Adam
|
|
|
|
phazei
Posts: 7
Joined: 8/23/2005
Status: offline
|
RE: <span> and element 'width' ignored in FF? - 8/23/2005 16:10:07
How can I set up a 3x3 grid of div tags if I don't use span?
And without using tables?
On that page I set up a 3x3 grid of span tags to set up
the borders going around the page. And based most of
it on percentages. I tried just using
div tags but they wouldn't work at all. The border grows
or shrinks if you change window size.
Also with all the checkboxes I put a span around each one
just so they'd all have equal width so if the page was
resized they'd align with eachother evenly. I tried putting
them in div tags first, but they realigned in blocks when I
did that.
I don't see any other way of doing this. I tried for a while
before using span.
I thought all the style elements were supposed to work
with all the tags for the most part.
| |
|
|
|
phazei
Posts: 7
Joined: 8/23/2005
Status: offline
|
RE: <span> and element 'width' ignored in FF? - 8/23/2005 18:18:06
when I do this:
<label class="botm"><input type="checkbox" name="c1" value="Basic Math ">Basic Math</label>
<label class="botm"><input type="checkbox" name="c2" value="Beginning Algebra ">Beginning Algebra</label>
<label class="botm"><input type="checkbox" name="c3" value="Intermediate Algebra ">Intermediate Algebra</label>
<label class="botm"><input type="checkbox" name="c4" value="Linear Algebra ">Linear Algebra </label>
CSS:
.botm {
width: 200px;
}
So that's not going to work because width and height don't work with inline elements.
And display: inline-block; isn't supported in FF.
So I need to align div tags using absolute.
The first one could be {left:0px; width:3%;} then the next could be {left:3%; width 80%;}
and the 3rd would be {left:83%; width 3%}
But if I need the edges to be a fixed width, how would I get around that?
The first would be {left:0px; width:25px} then {left:25px; width:80%}
but what do I do with the last one? {left:??? ;width:25px;}
??? would need to be 80%+ 25px, I don't know how I could get more than 2 div columns
lined up with widths varying by percentages and pixels....
Are tables the only way?
< Message edited by phazei -- 8/23/2005 20:13:46 >
| |
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: <span> and element 'width' ignored in FF? - 8/24/2005 3:30:21
Hi again
All things are possible (well most) it's just a case of following rules carefully.
Width and height are possible with <span>s it's just a case of how it's implemented.
I'd still go with <divs> much easier and less mark-up. You wanted three groups of three checkboxes? Here you go: http://www.littleblueplane.com/test/checkboxes.html
Here's the code in case I ever get rid of that page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Request more Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<STYLE TYPE="text/css">
<!--
#wrapper {font: 76% Tahoma, sans-serif;}
#checkbox1 {width: 200px;float:left;}
#checkbox2 {width: 200px;float:left;}
#checkbox3 {width: 200px;float:left;}
-->
</STYLE>
</head>
<body>
<div id="wrapper">
<p>Please select any of the following </p>
<!-- the "label" tags make the form more accessible for those using text readers -->
<div id="checkbox1">
<input type=checkbox name="service1" id="service1"><label for="service1">Service One</label><br />
<input type=checkbox name="service2" id="service2"><label for="service2">Service Two</label><br />
<input type=checkbox name="service3" id="service3"><label for="service3">Service Three</label><br />
</div><!-- end checkbox1 -->
<div id="checkbox2">
<input type=checkbox name="service4" id="service4"><label for="service4">Service Four</label><br />
<input type=checkbox name="service5" id="service5"><label for="service5">Service Five</label><br />
<input type=checkbox name="service6" id="service6"><label for="service6">Service Six</label><br />
</div>
<div id="checkbox3">
<input type=checkbox name="service7" id="service7"><label for="service7">Service Seven</label><br />
<input type=checkbox name="service8" id="service8"><label for="service8">Service Eight</label><br />
<input type=checkbox name="service9" id="service9"><label for="service9">Service Nine</label><br />
</div>
</div><!-- end of wrapper div -->
</body>
</html>
Much less mark-up than with all those spans -easier to change it too. I've put these checkbox groups in a containing div called wrapper. You can control where the three groups appear on the page by shifting the Wrapper div around.
Position:absolute is generally a bad idea for any large chunks of the page. It's not that it can't be used it's just that it has the tendency to cause you more problems than it solves. I have used it for placing a navigation bar but usually I'll use it for smaller things like a "skip link". I definitely wouldn't use it for whole divs - too much trouble!!
My advice would be to:
a. Include a DOCTYPE (there's one on the checkbox.html page you can use)
b. Put all the contents of your page inside a container div and then you can position that much more easily.
c. Leave the checkboxes within the Wrapper div otherwise the floating items will interfere with whatever comes next on the page.
d. Make sure all text has the relevant tags around it - some of your "loose" text needs <p> tags.
e. Don't lose heart - this is a good start and it does get a lot easier!
My plan for your page structure would look like this:
<body>
<div id="container">
<div id="header">
<h1>Badass Tutors</h1>
<p>Get a Badass Tutor</p>
</div><!-- end header div-->
<div id-"main">
<form>
(your main form stuff goes here)
<div id="wrapper">
<div id="checkbox1">
(first lot of checkboxes
</div> <!-- end checkbox 1 div -->
<div id="checkbox2">
(second lot of checkboxes)
</div> <!-- end checkbox2 div -->
<div id="checkbox3">
(third lot of checkboxes)
</div> <!-- end checkbox3 div -->
</div> <!-- end wrapper div -->
<h2>Other stuff</h2>
(other stuff goes here)
</div> <!-- end main div -->
<div id="footer">
(footer stuff goes here)
</div> <!-- end footer div -->
</div> <!-- end container div -->
</body>
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: <span> and element 'width' ignored in FF? - 8/24/2005 6:07:20
Oh I forgot to mention (*slaps head*)
Floating in general has a few "quirks" - for instance sometimes floating more than two divs to the same side can cause you problems. If this turns out to be the case for you then, making sure the wrapper div has the correct width on it, float the right-hand box right instead of left.
Also - IE misbehaves in unpredictable ways with floats - for instance sometimes it treats them like inline elements rather than the correct block level.
One way round lots of the IE floaty bugs is to add this: display:inline to the div's CSS. Don't ask me why it works, doesn't look like it should, it isn't logical but it does work.
Here's a link to an excellent site that will help you with this sort of thing: http://www.positioniseverything.net/
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
)
