Posts by autocrat

Okay... not wanting to come across as critivcal... but does this have to be tables?

You have 3 content zones... and not more than 1 item per row?
That would be 3 divs... thats it!
Maybe 1 outer wrapper if you like... 4 divs... thats 8 lines (open/close) - compared to the Tables 14?

Still, ignoring that... what styling have you tried to apply to the table?
Have you tried...

<table style="width: 600px; margin: 0 auto;">

???
Or applied an outer div and done it to that (along with text-align: center;) ???

Give those a try.

Well, is the table a fixed width?
Or if percentile, how much of a gap is left?

Dare I say it... you could paste it all in here
(last resort).
I'll grab a copy and work it over.

You have little choice.
Vertical alignment isn't really something that can be easily done.

If the pages are 'tall' or 'long' (ie. they won't fit in the viewport and you have to scroll), then you could apply padding or margin to an outer container.

If the pages area fixed height (say 400px or someting), then it can be done... usually by trickery (suchas positioning it down by 50%, then pulling it up by 25%)... but this can get a little out of shape in some browsers (some don't like negative margins, others don't like applying padding/margins to the bottom if certain styles are applied etc.).

Can you supply a URL?
(If you don't want to list your real one, pop over to tinyurl.com and get a 'fake' one for the time being ;))

Not wanting to sound funny... but we could do with a little more detail.

Okay, so you want to vertically align it...
what size is it?
Is it a fixed height or will it vary?

Can you not supply a link to the IE version of it?
(By the way, do you mean "I have a whole website that I am required to change so it works in FF as wel las IE" ???)

Okay... you say that you want it to take on the same style as outside the list.
Please tell me you have styling for Paragraphs...????

If so, simply use a Paragraph inside the List (should still be Valid, Semantic etc.), and then, where you haveyou paragraph style, simply follow it with
, ol p

:)

There may be a solution, but I can almsot gaurentee that it will only work on a few browsers!

Well, for a "quick fix"...
right after you middle div...
add a non breaking space...

<div id="middle">&nbsp;

Of course, it would help if you had a Doc Type, had a 0 (zero) for padding rather than an O (Capital letter o) etc. etc.

Pelase...
http://validator.w3.org
Use it to check as you build, saves lots of annoying little confusions.

Any chance of you being a little more specific as to which sections (putting Here1 and Here2 would have been very helpful).

It's down to how hte Browsers tend to repond - DocTypes tend to act as "how to read this" instructions to the Browser.
You'll find things like Quirks mode and the Box model in IE are different than Strict mode and the Box Model (look it up).

There is also "personal preference" too... I know some folks that refuse to move from html 4.01... saying it does everything it needs to, and XHTML is simply a pointless extra step.

Oh.. .and a quick check in Google...

http://www.codeguru.com/forum/archive/index.php/t-15117.html
(sorry folks...)

See if that helps.

erm... possibly the wrong forum... maybe the Programming/Scripting forums would get more answers?

Still, in an effort to assist...
If you are dealing with "calendar values"... then you could look up VB finctions for calendar/date/day/month etc.
Alternatively, as you know the likely input, you could do a bunch of If/ElseIf checks, and manually pass though a list of possible string values, and then set them as numerical/integer values instead.

If it's jsut general text to number, you may encounter problems, as different people may input "text values" differently.

Alternatively, if you are simply taking inputs/values that are in "string" form, and want to handle them as "integers" (i.e. they user is inputting the number 3, but the input is set as text instead of integer), then there may be something like Cast or StrToInt for VB ?

Could you tell us which Iamge you refer to?
You also have Inline styling, which will always overide/take priority external styling.

good luck :)

Okay,

- Revision 1 - better placement of footer -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->

<html>

<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>

<body>

<div id="pagewrap">
<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>

<!-- Main Section -->

<div id="container">

<div id="content">

<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>

<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->

<p>
Test content goes here.
</p>
<p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p>

</div> <!-- content -->

<div class="clear">&nbsp</div>
</div> <!-- …

regarding "height"

CSS "inherits", and "cascades".
If you have two items, outer and inner... and apply height 50% to each, thenthe outer will be50% of the screen, the inner wil be 50% of the outer.

If you only apply height 50% to the inner, and no height (or auto) to the outer, then it should not do anything, as it has no parent-height to refer to (if that makes sesnse - it has to way to tell how tall it should be!)

As far as I know, it isn't really possible.
There are waysto make it look that way (e.g. altering the BG image as I mentioned earlier?)... but otherwise no.

By putting in two positions like that, and in that order, it will take the last one only - that being :absolute.

Also, if I apply absolute to the leftcol, it just positions itself to the top left of the screen ?!?

To be honest, after much looking around, MidiMagic's method is the only way to make it look like a bigger checkbox/radial.

The only alternative is to style the labels and make them "clickable" and moe "visible", enabling people to click the label.
I have tested having <label for="n">Name <input /> </label>... it seems to validate and work in IE6 and Mozilla 1.5/2 for Win... which means you can style the label to be bigger, and it will encompas the input as well.

But it will not make the inputs bigger, nor make them appear bigger.
Not possible in non-ie browsers (one of the few of their "quirks" that is a good feature!).

I'd go with MidiMagic if I was you :)

... Dsiembab ...
ROFLMFAO :D

Still - It took me more than 6 Months straight learning from HTML and sodding Tables to XHTML and pure CSS - and the bugs drove me mad...
so if I see someone who is not lazy and willing to make the shift up on learnig, then I will do alittle to give them a leg up.

I put a few questions on here, webdev... even sitepoint (which I personally do not recomend).
Only fair a return the favour...

And havig an example like that to refer to is always a big help!

... ashneet ...

Not a problem - you seem willing to learn - so I'm willing to help, plus you ever asked me to do it,
"ask for, don't get; don't ask, don't want"
- one of my Mothers many odd and completely insensical sayings :) )

Let us know if it helps/works etc.

As for the Bugs, a lot of trial and error and research and swearing profusely because peolpe describe bugs differently :)
I myself am not keen, but will use a Hack if I have to, and to be honest, I'd rather use IE only hacks and a little invalid css than either ignore the most prominent browser and uset clients, or use umpteen style sheets (makes it nigh on impossible to alter later on!).

Okay - I've only done those that needed doing to get the layout correct.

Please pay attention...

1) You have a habbit of the last bit of CSS for each ID not having a closing ; - which means MozFFwill have issues!

2) You should make things in "lowercase" whenapply them... so not FONT-SIZE, but font-size!

3) In "most" cases, instead of using Padding-top/padding-right/padding-bottom/padding-left... try just padding: 0 0 0 0;!

4) Similarly - try to follow the order of Top-Right-Bottom-Left... even when doing a line each!

5) Also note that "0" does not ahave a measurement unit... so it is 0, not 0px :)

6) For somethings, making similar entries are not needed - such as you ahving no difference between Lik and Lik:visited... so you can put them together (see CSS).

Still.... you are making the effort, and the above should help.
Keep it up, you've already made some headway, and some of the commetns should help you get over the more annoyig bugs!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->


<html>


<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>



<body>


<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>


<!-- Main Section -->


<div id="container">


<div id="content">


<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>


<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div>  <!-- leftcol -->


<p>
Test content goes here.
</p>


</div>  <!-- content -->


<div id="contentfooter">
Content Footer content
</div>  <!--contentfooter-->


<div class="clear">&nbsp</div>
</div>  <!-- container -->



<!-- Footer Section -->


<div id="pagefooter">
Page Footer content
</div>  <!--pagefooter-->



<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->


<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>


<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>


</body>


</html>


/* You didn't include    HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for   text-size: 75%; */
font-size: 11px;
/*   helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}


body
{
MARGIN: 0;
padding: 0;
height: 100%;
background-color: #abcdef;
}



#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}



#container
{
margin: …

hmmm, must have forgotte html coding...
I thought things like <img> had to be either..
<img> </img> or <img /> ???

Still... here we go....

Arg - Validate man, Validate :)

http://validator.w3.org

That will show you a whole bunch of issues with the code...

Still, as you are willing to make the effort - so will I.

Keep an eye on her, I will paste you some code :)

...MidiMagic...
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.

...ashneet...
What you are asking for is possible... but it is fair easier, simplier and more reliable to "cheat".
Due to certain Browsers not following the guidelines, and others doing their own thing... things like "equal height columns" across all browsers are a pain.
So isntead,there are a couple of techniques... but "faux columns" is the most reliable.
This is basically makig a container that has a bg image, then two divs inside the container.
An alternative is to use the Ruthsarian layout... kind of Equal columns with some extras (though more complicated!).

So... simple version (try this one first!)

<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>

#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}

#contents
{
margin-left: 200px;
}

#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}

Give that a go.
If you have a fixed width design, it is a simple case of applying the BG to the Container.
If it is fluid... then make 2 …

okay...

Pleasedefine what you want the page to do.
I am assuming that Header at the top, then contents/nav and footer below the content/nav section.

so, are the content and nav to be seperate from each other, or is it to look like a single entity, and the white bg is to allways reach down and touch the footer?

If that is the case, try applying the background0image/styling the the container div, not the content div.

Taht said, if your Nav and Cotent are seperate from each other, and you are not clearing after the end and before the Cotent ends, then they will break out of the container in Mozilla.

As for tables isntead of Divs... it is a preferance, but with only a little effort, you can achieve exactlt the same result, but it will be a little more sensible to screen-readers.

Well... part of the problem may be using tables.... you may want to look into DIVS etc instead!

That aside... it will depend on whether you have applied a height to the HTML, Body and the TABLE of 100%.

Okay... after a quickscout around...

It is not possible (apparently).

That said... you do have alternatives;

If keepig it as Checkbox/Radial is important, then you may need to re-order the form code so that clickig the vlaue label will act the same as clicking the item (being the heckbox/radial).

Following the above, you can apply a visual marker to indicate the active area's, (so for the value label, apply a class and either add a subtle border or apply a background-colour).

An alternative approach isto replace the Checkbox/radial with a dropdown list. For Checkboxes you can apply multi-select, for the Radial a single option only is equal.
Though visually different, these will have exactly the same results.

To be honest... I didn't thik it was possible to alter certain form elements.

By applying font-size/line-height, you can alter the size of Text-inupts etc... but things like checkboxes I believe are "standard only" in compliant browsers.
(Will double check and get back to you on that though!)

For the mean time, if you make it a bit more accessible, it means people can click on the label for the checkbox/radio button and get the same result as clicking the "box".

what? You where here when I posted it :)
ah well, let us know ... if I missed anything, I may simply build a demo and point you to it... easier for me to build than theorise ;)

Well, does that work for you ?

sorry for the typo's etc.

Okay, thats a pretty big box...

so is your text going to "fit" inside that box exacctly?
(If so, what happens if the user changes text-size or your styling doesn't cover all browsers corretly? It will look broken straight away!)

If it is to be fixed width (all ways easier), then you can cut the image into 3 horizontal strips... the very top 10px, 10px from the middle and the last 10px.
Then you can make a Div, suing the Middle strip for the BG and tell it to repeat-y... and insert two spans.
The first span you put before the text, the second goes after.

...so something like...

<div class="prettybox1">

<span class="topofbox"></span>

Contents goes here

<span class="bottomofbox"></span>

</div>

...then try something like the following...

.prettybox1
{
margin: 0;
padding: 10px;
width: NNNpx;
position: relative;
background-color: #ffffff;
background-image: url(images/pretyboxbg.jpg);
background-repeat: repeat-y;
}

.prettybox1 span
{
position: absolute;
left: 0;
display: block;
height: 10px;
width: NNNpx;
}

.topofbox
{
top: 0;
}

.bottomofbox
{
bottom: 0;
}

that means that no matter the amount of text, it will alsways remain in the box, and it will always look pretty (bigger text resutls in the box shrinking in height, but the images move with it.

Alternatively, if you want the …

Not quite sure what you are asking for here...

If your text is in a container, such as a Div, then you can apply a Background to that.
You then have the options of the background Not Repeating, or Repeating along the X, the Y or both XandY axis...

If you are wanting it to appear "framed", such as a pretty box with curved corners, there are multiple ways of doing this, but I still prefer to sue either several nested Divs or a parent Div with several Spans to hold the images as backgrounds.

If you can supply more information, I can supply more details!

Technically, Frames are often considered bad for the internet.... they tend not to be SE Friendly, not particularly good to Screen/Text-Readers either.

That said, if more for a "Web-Application", such as on an Intra-net, then I'm not so sure as to the bad poitns being so important (though accessibility could be an issue!).

I would suggest possibly rethinking things abit.
You need to categorise and segregate into groups to make things faster.
Even if they are all as important as each other, you still need to make them smaller groups, as this will ifact speed up the user looking for things...
instead of showing all records A-Z, try showing A-C, D-F,G-I etc... and let the user go to the relevant group, then get the most likely data.
Much faster