CSS problems

[Kezzer]

Why is it you can't have 2 divs wrapped around two bits of text and keep it on the same line?

For example:

<div id="footer">
Copyright blah blah
<div align="right">
Hit counter here
</div>
</div>

It throws the second div on a line lower. I still don't understand why it's doing it. I have to keep the second div wrapped in the first one because that's what confines it to the rules of CSS otherwise it would align to the very right hand side of the document. This is the only problem i've got left with my new site design

[Spunkey]

AFAIK div tags cause a line break, bit like table tags.

try a <span> instead of div, as that doesnt break.

HTH

[Kezzer]

Never used the <span> tag before. Is it XHTML 1.1 compliant?

[Spunkey]

dunno bout XHTML as ive never used it, but it is HTML Transitional 4.01 if thats any help.

[Iain]

<span> is for an inline item and should be used within a container block e.g. a div. Every time you start a div you start a new container with different CSS rules (except those that are inherited) and hence will always get a line break

<span> is effectively a replacement for things such as <b> <font> <i> <u> and so on and is the accepted XHTML method for changing the style of an inline element

[Kezzer]

argh i still can't get it to align right. I do <span style="text-align:right;">text</span> but that part is embedded in another div yet the span tag is still not used unless i'm doing it wrong

[Iain]

Use a float and don't put styles inline, use a CSS file

so have
<div id="footer">
Copyright blah blah
<div class="footerRight">
Hit counter here
</div>
</div>

with the style

.footerRight {
float: right;}

[Kezzer]

The only way to do it in the end was like this:

<div id="footer">
<div style="float:left; display:inline;">Copyright &copy; KeZZeR.co.uk 2004 All rights reserved</div>
<div style="float:right; display:inline;"><?php include('includes/counter.php'); ?></div>
</div>

I finally figured it out

[Iain]

Don't put styles inline, it defeats the point of CSS. Give each of those divs a style name and put the styles into a CSS file. That way if you change the style of the footer then it will automatically update every page

[Kezzer]

Good point. Yeh i'll do that later on.

http://www.kezzer.co.uk/

Check it out though. The new simpler design. Loading times cut right down and it's using XHTML and CSS as opposed to tables. The simplest design ever but i find it looks nicer than before. Still need to do the database

[Iain]

You're not accounting for the way IE treats the box model. If you look at the site in Mozilla your form inputs are right next to each other. Best to build your site using Firefox as your browser and then make changes to make it work in IE. THat way you build compliant CSS and add the hacks later rather than building incorrect CSS and then reversing it back to make it look the same in Mozilla

One piece of advice to anyone who's aiming for compliance, don't build using IE as your browser, you'll only end up suffering later on

[Kezzer]

I use firefox and then go back to it in IE like you said. I only just created that form box last nite and haven't had time to make it work properly for IE yet and i'm not home to sort the problem out.