Jump to content
Sign in to follow this  
kaseytraeger

Css -- Need To Indent A Full Block Of Text

Recommended Posts

Hello everyone!

 

I'm working on an online menu for a local restaurant, and in trying to make the online menu look as identical to the print version as possible, I've come across two strange quirks -- one is unique to IE and the other to NS.

 

You can view the page in question at: Village Pantry Breakfast Menu

 

The IE quirk:

In the very first section of the menu, there is a boxed area with the "specials". When you scroll the page up and down in IE, portions of the border simply disappear and make the border choppy. I've never seen this kind of destruction to a div border, so I'm pretty much crossing my eyes like this little guy -- :D

 

The NS quirk:

Several entries in the menu need to be indented from their header. I've created the following class to handle the indenting:

 

>.indent{
padding-left:7%;}

 

(You will see this class in the attached style sheet called "base_style.css")

 

All of the entries requiring indentation are preceded with a dash "-" (see the Village Pantry Breakfast Menu to see which menu items are in question).

 

Amazingly, Internet Explorer gets all of the indentations correct. Netscape, however, only indents two of them, leaving the rest of them fully left-justified.

 

Has anyone ever experienced this NS quirk? It's rather annoying.

 

Please feel free to download the page code for more detailed examination. It's rather messy because I tried to create the menu using CSS instead of tables (I'm bound and determined to stay away from tables). That makes the page look like there's a lot more going on than really is. I will be more than happy to explain what each CSS element means and clarify any questions you have about the general layout.

 

I'm attaching one of the CSS style sheets, base_style.css, to this message (I had to convert it to a text file to upload it. For some reason, I couldn't upload a css file directly). There is a second style sheet, menu_style.css, that I will attach to another message.

 

This is going to be a pain in the neck to troubleshoot, but hopefully there is a brave soul out there somewhere who will be willing to tackle it!

 

Thanks a bunch!

:P Kasey

Share this post


Link to post
Share on other sites

Here is the second css file -- "menu_style.css"

Share this post


Link to post
Share on other sites

Hi Kasey.

 

One thing you might try - about the IE choppiness thing. I have read that IE chokes on the

<?xml version="1.0" encoding="iso-8859-1" ?>
at the beginning of the file. Maybe that's causing a problem? They say other browsers aren't affected if you leave it out until IE catches up (as if).

 

I see the indent problem in Firefox. I'll let you know if I have any good (or bad) ideas about it.

 

:)

Share this post


Link to post
Share on other sites

I see the indent problem too(firefox/NN), but could not duplicate the IE choppiness in IE6 or IE5.5 on winxp. I can't get the menu to scroll of the screen though because my display is at 1280 x 1024. Maybe that's why I don't see it...

 

EDIT: Okay, yeah, when I change my resolution 800 x 600, I see the choppiness on the right side of the large box, but only if I grab the scrollbar.

Share this post


Link to post
Share on other sites

It's just a start, but 'pixels' seems to be working in both Firefox and IE (rather than percentage). I set your indent padding to 15px, and it works fine. That may be a little rigid for you, but i haven't figured out why percentage is acting buggy...

Share this post


Link to post
Share on other sites

I will try the pixel work-around for the indentation and see what I get. Will let you know...

 

:dance: Kasey

 

P.S. -- Thanks to Jim and Kris for helping on this!!!

Share this post


Link to post
Share on other sites

Well, I tried changing my .indent class to reflect a 10 pixel left padding rather than a 7% left padding. It works quite well! I'm still curious, however, why Netscape choked on this one.

 

Before I made the final change to the page, however, I noticed something that I found puzzling ... when I looked at the page in Netscape, one thing that stood out to me was that if the indented line was a single line long (i.e., the line was not long enough to wrap to the next line), the indent class did not work. When the indented line wrapped around and had to be placed on two more more lines, the indent class worked fine. So I did a little test. I took one of my short, "single" lines that were supposed to be indented (but weren't) and added about a dozen words so that I would know the browser would have to wrap the text. Sure enough, the Netscape browser correctly applied the indent class now that the text had to be wrapped to another line.

 

Anyone ever seen this behavior from Netscape before? I'm wondering why it will work wonderfully when a line of text wraps but chokes when the line of text sits fine on a single line.

 

I'm also still wondering about that strange effect in Internet Explorer that causes breaks in the border of one of my divs. Maybe there's a work-around for that one, too. (I cringe at the thought of work-arounds, but I guess they are sometimes the only thing available to get the necessary effect.)

 

;) Kasey

Share this post


Link to post
Share on other sites

Very interesting! :P I also noticed before with percentage (NN/Moz) that if you resize the browser width (dramatically - like 50%), the indent class starts to 'kick-in', but at different amounts. From what I understand, the percentage should be based on the containing block (the <div> above?), so I really couldn't figure out why the lines weren't calculating that width the same.

 

Also read an old blerb in a css text about Netscape having trouble with padding as % when using it with float, but it seemed outdated. I couldn't find anything on Netscape's site and didn't test it for myself. Anyway, the page looks great now! :lol:

Share this post


Link to post
Share on other sites

I have a feeling that when you dramatically reduced the browser window size, it forced the lines that weren't indenting correctly to wrap into a second line of text. If so, then that would fit with my findings that Netscape handles the padding/indentation properly if you add enough text to a single line to create a word-wrapped line.

 

In any event, if you ever remember where you found that little blurb about Netscape not handling padding percentages properly, please post a link. I'm very curious to read what the article has to say, even though you say it was a bit outdated. Maybe this is an issue that Netscape hasn't yet addressed.

 

:dance:

Share this post


Link to post
Share on other sites

I apologize if this goes off on a tangent, so yell at me if I should post this elsewhere, but...

 

It's rather messy because I tried to create the menu using CSS instead of tables (I'm bound and determined to stay away from tables).

 

I know a little HTML, even less CSS and JavaScript, but I'm working every day to learn more. I concluded, from another thread, that I should generally "stay away from frames" when designing a site.

 

But is your decision to avoid tables based on the context of the particular problem you are trying to solve, or is there a similar "stay away from tables" motto I should know about?

 

My instincts would have told me to go with a table for what you are trying to do. But I honestly would like to learn more about why tables would NOT be good approach here. Or, more generally, could someone point me to a good reference on how to decide when I should choose tables or css or frames, or what. I'm fine with teaching myself the technical side of any of these topics, but I would love a little guidance on the relative merits and drawbacks of each.

 

Sorry for the tangent discussion, but I'm just trying to get a bit smarter about things.

Share this post


Link to post
Share on other sites

Not actually a tangent, I think.

 

The best reference I've come across is "Designing with WebStandards" by Jeffrey Zeldman. A very readable and informative book about the whole subject. You can find out more on his site.

 

Best of luck in your studies. A worthy endeavor. :)

Share this post


Link to post
Share on other sites

nortk,

 

This was the first time I had tried using CSS to replace tables when designing a web page. I can tell you from my newbie, first-time experience that I found it to be more labor-intensive up front than using tables. However, this is probably because it was the first time I had tried doing this, and I'm also still in the early phases of learning CSS.

 

What I have found that gives me a great amount of glee is this -- once I had laid out the page, I began fiddling with some of the properties of each CSS element involved in creating the "table." By making very minimal modifications to the CSS elements, I could completely change the look and feel of the page, the size of the "table," etc. It was great!

 

Aside from wanting to start off on the right foot by using CSS and designing to web standards, I was also motivated to use CSS instead of tables because of the very fact that a small amount of editing can produce drastically different pages. If I had tried to do this with tables, I would have had to edit each and every <table>, <tr>, <td>, <th> tag, etc.

 

Basically, you have so much more control over your web pages using CSS than you could ever have begun to dream about using tables. Believe me, I've been building web pages for fun for since 2000, and each one used tables, so I know first-hand what a pain it is to modify a web page when you have to go through and change each tag one by one. The web site that I'm currently working on is the first site I've done that is based on pure CSS (i.e., no tables). Jim (aka btrfld) and many other people here at TCH have been extremely helpful in the advancement of my CSS education. I will never go back to tables.

 

Especially if you're developing a template that you plan on using more than once, the extra time you take to learn CSS upfront will be a big time-saver for you later on!

 

If you want to see some really cool stuff CSS can do (some if which is impossible with tables), you can visit Eric Meyer's CSS/Edge. I was really inspired by this site.

 

:goof:

 

P.S. -- Be sure to read the book that Jim (btrfld) has suggested. If you don't want to buy it until you've had a chance to look it over, your local library most surely has a copy. Our local library has 3 copies, and I'm in the queue at position #14 waiting to get it! That shows you the amount of interest in this subject.

Share this post


Link to post
Share on other sites

Kasey Posted on Feb 26 2004, 12:58 PM

This was the first time I had tried using CSS to replace tables when designing a web page. I can tell you from my newbie, first-time experience that I found it to be more labor-intensive up front than using tables. However, this is probably because it was the first time I had tried doing this, and I'm also still in the early phases of learning CSS.

 

Yep, I have to agree with you 100%. I am also into my first foray with table-less layouts. I have used css to a small degree for quite sometime,mostly for removing underlines from links and link color changes. Until I read some post in these forums I had no idea what table-less implied. It seems the more I learn about css the more I want to learn(I think its addictive).

 

If you would like to take a look its Here.

 

I also never liked very dark backgrounds but I thought if i'm going to try something new then try it all the way.

Share this post


Link to post
Share on other sites

Thanks, curtis! That's great! I've bookmarked your page! I've been following Kasey's missive on table-less layouts. I've been more than curious but have not yet had the time to research further. She already had me convinced it was worth my while to get more involved with CSS though. :goof:

 

Thank you, Kasey, for steering me in what I believe is the right direction and for the link to css/edge! I've been using CSS since shortly after it's inception but I am beginning to realize that I have not yet learned nor tapped it's potential. :)

Share this post


Link to post
Share on other sites

Bunni,

 

I'm glad you've decided to step into the CSS world. I've only been doing this for a few weeks, and I've got a world of information to learn, but I can honestly say that I feel better about the web pages I've done in CSS than anything prior. I think it's because I'm one of those very I AM A SPAMMER programmer types (one of my bachelor's degrees in college was computer engineering, which is a mix of electrical engineering and computer programming) and like to know that I'm doing my best to make my code clean and efficient.

 

I think you've made a good decision to learn the ins and outs of CSS. I'm finding it a bit confusing to keep track of the quirks that each browser brings to the table, especially in the way they interpret CSS properties. The CSS Box Model Hack still has me struggling a bit, and I'm wondering how in the world these people come up with such ingenious ways to get each browser to interpret the properties correctly so that the web page is cross-browser consistent. (By the way, if you're interested in reading up on what I mean by the Box Model Hack, just type those three words into your favorite search engine and you'll be amazed at how much is out there.)

 

The biggest challenge to me is layout using CSS, but I've visited the CSS Zen Garden web site and am really amazed that different people can take the same base HTML document and get such widely different web pages based on their use of style sheets. It's really neat. I figured that if they can do it, I can too. It will probably just take some time and experience to get as good as those people, though.

 

Anyway, I'm blathering on. Just wanted to say I think you've made a good decision, and I'm glad to have been an encouraging factor!

 

:D

Share this post


Link to post
Share on other sites

Please, blather away. You are a fountain of information! I will continue my education on CSS. I need to visit a bookstore too. I hope any questions I have are not bothersome. I should be ok though. I tend to work away and learn quietly in the background, although absorbing isn't quite as easy as it used to be. :lol:

Thanks again, Kasey. 'Preciate your knowledge and your willingness to share it here in the Forums.

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.

Sign in to follow this  

×
×
  • Create New...