16
Tobias
Re: style="clear: both; & FireFox problems
  • 2006/11/22 18:11

  • Tobias

  • Not too shy to talk

  • Posts: 172

  • Since: 2005/9/13


Quote:
Another great tool for Firefox is the web developer toolbar.


Agreed. I love it! Particularly what's in the "Outline" and "Information" menus.

Another great extension is IE Tab. Kiss good bye to one of those gzillion browser windows typically populating the screen when one is trying to design something, and use the IE rendering engine from inside a Firefox tab:

https://addons.mozilla.org/firefox/1419/

Then, of course, you want to save the time to run from computer to computer only to see how things look in the several versions of IE. Now possible, thanks to Multiple IE:

http://tredosoft.com/Multiple_IE
www.affvu.org

15
JMorris
Re: style="clear: both; & FireFox problems
  • 2006/11/22 10:29

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


Quote:
Nothing against JMorris's solution, but while you're at it, you may consider swapping the main column with the left column, so the content comes before the navigation. Good for small devices and search engine optimization.


No offense taken and you are absolutely correct. The example I gave was just a starting point. The beauty of CSS is how easy it is to switch the two columns.

RE: >100% and horizontal scrollbar...

rabideau,

It looks like your user login form, below the header, is set to a width of 100%. Depending on how you have your padding and margins setup, that could cause your scrollbar issue. Try experimenting with the width, padding and margins on the divs you have set at 100%.

Another great tool for Firefox is the web developer toolbar.

http://chrispederick.com/work/webdeveloper/

I use it almost every day.

BTW.. The site looks much better. Looks like you've just got some tidying up to do at this point. Good work!

Best Regards,

James
Insanity can be defined as "doing the same thing over and over and expecting different results."

Stupidity is not a crime. Therefore, you are free to go.

14
Tobias
Re: style="clear: both; & FireFox problems
  • 2006/11/22 7:21

  • Tobias

  • Not too shy to talk

  • Posts: 172

  • Since: 2005/9/13


Looks very good. Seems to be more than 100% wide, though. It produces a horizontal scrollbar at the bottom. More importantly: It throws tons of warnings (errors, for validation purposes) when checked for tidiness, some of them related to <div>s not closed properly or in a wrong order. That's very likely to break your layout at some point. You may want to get the HTML Validator extension for Firefox fromhttps://addons.mozilla.org/firefox/249/. It's extremely helpful for sifting through malformed html code. Also, once you're done, to enjoy the fact that yours is clean and so much out there terribly dirty.

Btw.: Since you're obviously caring about standards compliance and "separation of structure and presentation," if it displays "correctly" in IE6 and not in Firefox, then that's most probably because it does NOT display correctly (i.e., how the standards demand it should display) in IE6. IE7 has come a long way toward compliance, meaning it displays many things more like Firefox than like IE6. But I guess that, to reach the full range of browsers, including Opera, Safari and the Linux browsers, it's a better idea to make it work with the Fox, and then see how to fix it in IE6.

Monty has already pointed to positioniseverything.net. That's really an indispensable resource for all clearing and floating purposes. They have a really nifty pagemaker there which produces a series of layouts--fixed width, fluid, n number of columns, headers, footers, etc.--according to your specs, and with a variety of browser specific hacks already in it. It's athttp://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php. Might be interesting for you to have an eye into that, even though yours seems to be mostly working now, the problems with the divs not withstanding. I think I've seen something similar somewhere else but don't remember where.

Nothing against JMorris's solution, but while you're at it, you may consider swapping the main column with the left column, so the content comes before the navigation. Good for small devices and search engine optimization.
www.affvu.org

13
rabideau
Re: style="clear: both; & FireFox problems
  • 2006/11/22 5:19

  • rabideau

  • Home away from home

  • Posts: 1042

  • Since: 2003/4/25


Hi Jim,

I did as you suggested. You may see the progress of my efforts now.

Comments????

http://processteam.org

btw. it even works with IE 7....
Pax vobiscum,
...mark

may the road rise to meet your feet!

http://treemagic.org

12
JMorris
Re: style="clear: both; & FireFox problems
  • 2006/11/22 5:05

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


What is the context of needing to clear:both;? Which elements are you needing to clear?

Off the top of my head [not tested], I would start out with a "wireframe" like so...

CSS
#header {margin:auto;width:770px}
#wrapper {margin:auto;width:770px;}
#leftcol {margin:0;padding5px;width:170px;float:left;}
#rightcol {margin:0 0 0 170px;padding:5px;}
/*.leftcol blocktitle {your CSS here}*/
/*.leftcol blockcontent {your CSS here}*/
.rcolclblk {margin:2px;padding:5px;width:48%;float:left;}
.
rcolcrblk {margin:2px;padding:5px;width:48%;float:right;}
.
rcolccblk {margin:0 2px 0 2px 0;padding:5px;display:block;}
#content {margin:0 2px 0 2px;padding:5px;display:block;}
.rcolcblblk {margin:2px;padding:5px;width:48%;float:left;}
.
rcolcbrblk {margin:2px;padding:5px;width:48%;float:right;}
/*.rightcol blocktitle {your CSS here}*/
/*.rightcol blockcontent {your CSS here}*/
#footer {margin:auto;width;770px;}

XHTML
<div id="wrapper">
<
div id="leftcol">
<
div class="blocktitle"></div>
<
div class="blockcontent"></div>
</
div>
<
div id="rightcol">
<
div class="rcolclblk"></div>
<
div class="rcolcrblk"></div>
<
div class="rcolccblk"></div>
<
div class="rcolcblblk"></div>
<
div class="rcolcbrblk"></div>
</
div>
<
div id="footer"></div>
</
div>

Clarification
rcolclblk = right column, center top left block
rcolcrblk = right column, center top right block
rcolcblblk = right column, center bottom left block
rcolcbrblk = right column, center bottom right block

The above *should* produce a basic layout that is consistent with what you're wanting to acheive. If it does not, try adjusting the margins and padding and you should be able to get the desired result.

HTH.

JM
Insanity can be defined as "doing the same thing over and over and expecting different results."

Stupidity is not a crime. Therefore, you are free to go.

11
rabideau
Re: style="clear: both; & FireFox problems
  • 2006/11/21 13:36

  • rabideau

  • Home away from home

  • Posts: 1042

  • Since: 2003/4/25


Hello all,

Thanks for struggling with my ill-defined problem. Turns out my problem existed at multiple levels; including I had a misplaced ";" in the theme, plus I found a 'bonus' float area in my hacked css file.

I am almost to the point where I have the css and html operational. Both still need a lot of cleanup and simplification though.

Here's what I was tryng for:
-- no tables
-- css driven theme

I also am looking for a bit non-traditional look & feel with a bunch of space saving.

So here's what this theme has so far (aside from a few bugs):
--> top center left & right come to the top
--> center center is in the middle
--> bottom center left & right show at the bottom
--> the menu is totally customizable with multimenu (soon
there will be an image in it at the top left (I hope).

I will try to get the theme validated later.

I am very interested in any/all comments on the theme.

THANKS!
Pax vobiscum,
...mark

may the road rise to meet your feet!

http://treemagic.org

10
Peekay
Re: style="clear: both; & FireFox problems
  • 2006/11/21 11:29

  • Peekay

  • XOOPS is my life!

  • Posts: 2335

  • Since: 2004/11/20


I agree with JMorris that it's hard to see what you are trying to do. Could you perhaps use:
<br clear=all>

I find this works a treat in every browser... so it probably won't validate, be politically correct or accessible.
A thread is for life. Not just for Christmas.

9
JMorris
Re: style="clear: both; & FireFox problems
  • 2006/11/21 4:15

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


rabideau,

Could you clarify what the end result you're trying to acheive is?

Code is great, but it doesn't clearly convey vision.

Best Regards,

James
Insanity can be defined as "doing the same thing over and over and expecting different results."

Stupidity is not a crime. Therefore, you are free to go.

8
rabideau
Re: style="clear: both; & FireFox problems
  • 2006/11/21 3:28

  • rabideau

  • Home away from home

  • Posts: 1042

  • Since: 2003/4/25


I have found a way to make parts of it work... now I'm having the IE/ FireFox px (pixel- spacing) count problem.

I hate it that the site looks correct under IE but not FireFox.

Perhaps one of you css giants (as opposed to me, a bear of small brain) can help me. The site again is at:

http://processteam.org
Pax vobiscum,
...mark

may the road rise to meet your feet!

http://treemagic.org

7
snow77
Re: style="clear: both; & FireFox problems
  • 2006/11/21 3:18

  • snow77

  • Just can't stay away

  • Posts: 864

  • Since: 2003/7/23


Doooon't surrender ! it'll be worthwile if you keep on. I am not sure how to help you since I can't see the CSS in your code, you just pasted the HTML.

You can look at the CSS wireframe project we had started some time ago ...it's simpler than morphogenesis, so you could want to update some parts a little, I don't remember if it has the blocks below content added... I think it might. Just thought it could be a good start

view the css wireframe here
www.polymorphee.com
www.xoopsdesign.com

Login

Who's Online

222 user(s) are online (141 user(s) are browsing Support Forums)


Members: 0


Guests: 222


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits