Jump to content

css issues of my site


aRTee
 Share

Recommended Posts

I'm reworking my website to finally get a better look; so far I've done the main page and the acquisition page.

 

If you hop on over to:

http://www.mandrake.tips.4.free.fr/

you'll see what I mean.

 

Now, the thing is, I wanted a slighly different look, I have added an option to load a different stylesheet (in Konqueror: view - use stylesheet, in Firefox: View - page style) so give it a go, load "Orig".

 

If you have a look with Konqueror you see what I wanted, if you look with FF/Mozilla, you'll see why I can't use that one.... Rats!

 

So how do I get the "Orig" style working in both Konq AND FF/Moz?

Anyone a clue?

 

Ps any comments as to the new style?

You can easily compare to the old one via other pages (or google cache).

Link to comment
Share on other sites

  • Replies 43
  • Created
  • Last Reply

Top Posters In This Topic

I know this is not direct help.

 

But if you get the Web Developer Toolbar extension for Firefox, then you can do a lot of things that will make it easier for you to visualize how your page is constructed and change page attributes on-the-fly. It is an invaluable tool when developing a website, especially when it heavily uses CSS.

 

I'm going to sleep now. Maybe if I have time I will look at this tomorrow. I'm not sure if I will find the time to do so though. But I think the developer toolbar should help you somewhat with determining the problem.

Link to comment
Share on other sites

First, I like the new direction, and yes, it was a good read ;)

 

The thing that hit me first viewing with Mozilla were missing background images. So I look up what you have there.

background: black url(images/mdklogobgdkbl.jpg) 0 0 repeat fixed;

This is different than the way I use this feature and may possibly be the cause of why they don't show in Mozilla.

For comparison, here's the same line from one of my css stylesheets:

color: #00ff00; background-image: url(images/navbar.jpg)

I am only making a quick guess/observation here as I am at work and don't have my favorite text editor handy to read the css better. I really don't know css that well either, but I have heard that Mozilla is a lot pickier on its code than IE or Konq. ;)

Link to comment
Share on other sites

a very good source of CSS/XHTML help is http://alistapart.com they have some great methods of doing things! When viewing your site in IE, i notice that the content is shifted to the right a fair bit.... looks horrid! :cheesy:

 

If you want to use multiple style sheets, your best option would be to to use PHP to set either variables, or cookies, and then have a script that selects a style sheet based on the contents of the cookie... want to know how to do that? so do i :unsure: !!!

Edited by dickohead
Link to comment
Share on other sites

I know this is not direct help.

 

But if you get the Web Developer Toolbar extension for Firefox, then you can do a lot of things that will make it easier for you to visualize how your page is constructed and change page attributes on-the-fly. It is an invaluable tool when developing a website, especially when it heavily uses CSS.

 

I'm going to sleep now. Maybe if I have time I will look at this tomorrow. I'm not sure if I will find the time to do so though. But I think the developer toolbar should help you somewhat with determining the problem.

 

I will give that a look.

 

 

First, I like the new direction, and yes, it was a good read ;)

 

The thing that hit me first viewing with Mozilla were missing background images. So I look up what you have there.

background: black url(images/mdklogobgdkbl.jpg) 0 0 repeat fixed;

This is different than the way I use this feature and may possibly be the cause of why they don't show in Mozilla.

For comparison, here's the same line from one of my css stylesheets:

color: #00ff00; background-image: url(images/navbar.jpg)

I am only making a quick guess/observation here as I am at work and don't have my favorite text editor handy to read the css better. I really don't know css that well either, but I have heard that Mozilla is a lot pickier on its code than IE or Konq.  ;)

 

 

What do you mean: the background images don't show up? They show up for me fine.

 

 

a very good source of CSS/XHTML help is http://alistapart.com they have some great methods of doing things! When viewing your site in IE, i notice that the content is shifted to the right a fair bit.... looks horrid!  :cheesy:

 

If you want to use multiple style sheets, your best option would be to to use PHP to set either variables, or cookies, and then have a script that selects a style sheet based on the contents of the cookie... want to know how to do that? so do i  :unsure: !!!

 

Yeah, but I want just one CSS to fit all.

 

BTW I could fix it if I would accept to make the main text a table column, and not have the text take the whole width the way it does now, below the floating side info on the right hand side.

But I like this float...

 

Here's what it looks like on Konq (back) and FF (front), with the "Orig" stylesheet - notice how the H2 bars have their background go all the way over the right sidecolumn in FF? Nasty!

Have a look at what it's like in Konq - btw Opera has the same look as Konq.

post-500-1101199730_thumb.jpg

Edited by aRTee
Link to comment
Share on other sites

Guest Adriano

Why don't you wrap the main text in a div and style that? it should solve your problems, I think.

 

Another comment: <div class="srheader">Feature article</div> is better replaced by an <hN> tag styled in css as follows:

 

div.srcontent h2 { /* for example */

something: something;

}

 

You could also use

div#sideremarks h2 {

....

}

 

Same thing for the following:

 

<p>Added Mar 11<sup>th</sup> 2004:<br>

The <a href="http://www.mandrake.tips.4.free.fr/review100.html">review of Mandrake 10.0 Community edition</a>.

</p>

 

Here you could use

<hN>Added....</hN>

<p>The ... </p>

 

All properly styled, of course.

 

Though I tend to "overdo" it and wrap each of those in a div to have them as objects (OOP in HTML... Fun Fun Fun!). Another possibility is using a definition list. Use that which seems more natural.

Link to comment
Share on other sites

Guest Adriano

Third comment: dike out those <p align="justify">...</p> and replace them with css:

p {text-align: justify;} /* obviously adapted to the surrounds of p. */

 

Same goes for the <font color="darkred">... Simply add a classed span if you must (this seems tobe just as bad as the font color... but you can do much more than color the spans, and you only have to do it once :)

 

Ditto for <a name="sitelog"></a><span><h2>Site log</h2></span>

 

I don't get why you use the span there... Nor the <a name="something">. Simply <h2 id="something">...</h2> does the trick.

 

Last, the footer could be id'ed instead of class'ed (it only appears once on every page).

Link to comment
Share on other sites

Guest Adriano

Finally, and it should have been firstly: the page doesn't validate as HTML. Try solving that first and then check the looks in firefox. (in Opera, doing Ctrl Alt V does it automatically).

Link to comment
Share on other sites

Guest Adriano

Wrapping the content with the following solves the issue in firefox 1.0. Feel free to modify it as wished:

 

<div id="maintext" style="width: 80%;">....</div>

 

Ah, last remark for now: when you tell people to ditch Explorer for Opera, Firefox, etc. it's nice to link directly to them :)

Link to comment
Share on other sites

Adrianovaroli,

 

thanks a lot for all the hints.

 

I noticed the span tags don't validate, just messed up in which version I uploaded - makes no difference though, but I will fix it.

 

Lots of other things date from the older version, like the p justify and red stuff - but you're right, I can/should put that in css and be done with it. But that's not the issue, because whether I fix that or not, the main problem doesn't get better....

 

And I know I could link to opera and ff - but have a look at the bottom of the page, I have links in my standard page footer - which is on every page, whereas my logs slowly sink down...

 

I will try your ff fix.... but I'm afraid it won't let text take full width below the float on the right hand side, which is what I want...

Link to comment
Share on other sites

Guest Adriano

I see what you mean. I think there's a way to do it once and for all, and might have something to do with the clear: selector of css. But I should try it first.

 

I could say that it looks more "professional" to me as one column, but that's more a copout than an answer.

Link to comment
Share on other sites

Hmm, it may look more professional, but I don't think all pages will have this floating side remarks (although... I could just find anything to put there.. latest site news or so), in which case some pages will have the full width (minus the left part), and others will have a smaller mid section due to the float.... which is not more pro looking imho.

And: it is a copout indeed :P

Thanks for your hints though, I may just have to go for the fixed width thingy without text under the float..

Link to comment
Share on other sites

Guest Adriano

add the following to the #sideremarks css style:

z-index: 3;

 

And the problem is over.

z-index specifies the relative position in the 3rd dimension (i.e. how the stack of elements is displayed. by default it's 0, bigger positive values pull it up, and using negative values can lead to trouble.

 

Enjoy!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share


×
×
  • Create New...