Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Codewalkers ForumsOther TechnologiesClient Side Things

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
  #1  
Old February 1st, 2005, 07:52 PM
rrector rrector is offline
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Apr 2007
Location: Olney, IL
Posts: 9 rrector User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via AIM to rrector Send a message via Yahoo to rrector
problems with CSS layout (inline-block and the like)

So I'm having a bit of a problem with standards across all browsers (go figure). First off, This is what I'm working on. Just a personal site, nothing major, just learning and building my knowledge with PHP, MySQL, and XHTML.

The problem is with the quote: section near the top. In IE (6 SP2) and Opera (7.54), it displays correctly, while Netscape (7.2) and Firefox (1.0) do not. The beginning of each of the lines of the actual quote are supposed to line up with each other, as well as the line below, in this case "-Bleeding Kansas - F Squared". On Netscape and Firefox all lines after the first line up with quote: instead of the first line. Currently (and standards-compliant) I have the quote itself, and the line below it, in a q tag, and the relevent CSS is as follows:
Code:
#menu q{
	display:inline-block;
	quotes:none;
	vertical-align:text-top;
	width:240px;
}


Also in this context, it has a "white-space:pre;" style dynamically placed in the tag itself.

My understanding of "inline-block" is that basically it should work the same as if there were an img tag in there instead of the q. I feel that "inline-block" should have the basic shape of a block. As in, four sides.

To remedy this, I've tried to make it a block element, with "clear:none", as well as quote:, that didn't work. Attempted to "float:right" the quote itself, but that just brought the bottom border up to cut it through half way. The quote will change frequently, so setting a height for the outer box is not an option, without a lot of hassle. I don't want to have to do it that way. Tried to make Netscape/Firefox respect the box by placing a left maargin, as well as padding to the left side, and even attempted a border on the left, with no effect. I do know that it can be fixed by placing the quote inside a single-celled table, but that's symantically incorrect usage of a table, and I truely wish to avoid that.

All in all, this is a very minor problem, one, because it's not a major part of the layout, and two, it will only affect a very small amount of viewers. I just want to make sure I'm not missing a simple (and symantically correct) fix.

Goodness that was long-winded... I always knew I had a passion for something. Is it wrong (sad) that it just happens to be this?
*shrugs*

Here's to a future where browsers are one hundred percent standards-compliant.

Reply With Quote
Reply

Viewing: Codewalkers ForumsOther TechnologiesClient Side Things > problems with CSS layout (inline-block and the like)


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway
Stay green...Green IT