Jump to content
cyber0ne

New to CSS - A Few Questions

Recommended Posts

I just started re-designing my website in the effort to completely seperate content (HTML) from style (CSS). This being my first "real" work with CSS, I've put up a test page where I'm just messing around with the layout, trying to get it to look right in my three test browsers (IE, Firefox, Opera). The test page is at:http://www.cyber0ne.com/test/cssI have a few questions regarding some things I've been trying to do but, thus far, have been unsuccessful...1) I notice that the :before pseudo-element (notice the "ContentLinks" DIV at the top of the page with three links in it) doesn't seem to be working in IE. Is there a workaround for this, or is IE just not up to speed?2) Is there a way to get that first H1 element to start beneath the "ContentLinks" DIV?3) Is there a way to get element boxes in the blog (H1s, DIVs, anything I may add later) to not have their backgrounds stretch beneath other elements, but rather to stop where the text stops?4) Is there a way to get lists (notice the top blog post) to stay left-aligned to whichever is the right-most item, so as to not wrap in or out and mess up how the list looks?5) Finally, does anyone have any suggestions for better ways of doing any of the layout I'm trying to do here? I was hoping to keep the "NavigationLinks" and "ContentLinks" DIVs outside of the "Main" DIV, but still have the text in the "Main" DIV wrap, especially since that "NavigationLinks" DIV has no pre-defined width throughout my website. I haven't found a way of doing that just yet, though. Any ideas?Any help would be much appreciated, thank you.-cyber0nehttp://www.cyber0ne.com

Share this post


Link to post
Share on other sites

Ah, now I see that.I was just making some changes to try and simplify my CSS and now it seems that IE displays it very, very wrong. For the first time, Firefox and Opera are dead-on exact in how they display the page (the above questions 3-5 still hold, though), and when I get home I'll be trying it with some other browsers, too. Any idea why IE seems horribly confused by the current state of my CSS?-cyber0nehttp://www.cyber0ne.com

Share this post


Link to post
Share on other sites
Any idea why IE seems horribly confused by the current state of my CSS?
1. To start with, the Mozilla Foundation and Opera wanted to make web browsers more compatible with proper coding, and offer a free, safer and better browser alternative to IE.2. I may be harsh, but IE sucks... :)3. (A more fair view)MS rarely updates their IE, only within varieties of Windows OS, and some smaller security upgrades. It is hoped that Windows Vista Internet Explorer 7 will have better support for the web standards...PS: If you click the css play logo in my signature, you'll go to a site that's helped me a lot. This guy is really good with css, but you'll have to look at his code and notice the use of classes and ids. Excellent menus and layouts and stuff... :)

Share this post


Link to post
Share on other sites

That site does look pretty helpful, thanks. I've come across a page or two in it from my previous google searches, too.What I think I'm just going to do is make an alternate stylesheet for IE and let the user just pick that one. Of course, most IE users won't know what that means. Any suggestions for a good way of implementing that? Or, as always, does IE just not know how to use alternate stylesheets?Right now I'm just using: <link href="screen.css" type="text/css" rel="styleSheet" title="Standard" /> <link href="print.css" type="text/css" rel="stylesheet" media="print" title="Print" /> <link href="invert.css" type="text/css" rel="alternate styleSheet" title="Invert" /> <link href="explorer.css" type="text/css" rel="alternate stylesheet" title="Internet Explorer" />-cyber0nehttp://www.cyber0ne.com

Share this post


Link to post
Share on other sites

Well, I suppose you could trick IE into doing other css. If you put a star * in front of your css, other browsers than IE will ignore it, while IE executes the css. So maybe if you havep {font-size: 12px;*font-size: 15px;}IE will first choose the first, then transfer to the next as it reads the css. That way you can manipulate your IE view for every tag...

Share this post


Link to post
Share on other sites

That is absolutely horrible. It works, and I thank you for it. But it's still horrible :)On a side note, some of that guy's demos (the CSS Play site) are amazing! I'm seeing what I can pick up in order to accomplish similar, though not entirely exact, goals.For example, it's easy to have a DIV that appears when hovering over another element. But is there any way to get that DIV to stay visible until something else is hovered over? So the user can interact with it (links, form elements)? Can it be done via clicks instead of hovers?I'm going to look into this a bit, and may start a new thread here another time if I can't seem to get it just right :)-cyber0nehttp://www.cyber0ne.com

Share this post


Link to post
Share on other sites
That is absolutely horrible. It works, and I thank you for it. But it's still horrible :(
Yeah, that about sums it up... :)
On a side note, some of that guy's demos (the CSS Play site) are amazing! I'm seeing what I can pick up in order to accomplish similar, though not entirely exact, goals.
I just love the css flag he did. It's just awesome... :)Also some really cool menu-styles and borders... :D

Share this post


Link to post
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.

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...

×
×
  • Create New...