I've begun converting my site to CSS, actually I'd like to - I'm not certain that I've actually begun, but that's beside the point. I'm having problems understanding when the following page displays differently between IE, Opera and Netscape and is not quite doing what I think it should. Help?
css Study
<!-- m --><a class="postlink" href="http://www.gatewayorlando.com/content/_cssStudy.asp?showpage=yes">http://www.gatewayorlando.com/content/_ ... owpage=yes</a><!-- m -->
sample existing page
<!-- m --><a class="postlink" href="http://www.gatewayorlando.com/content/transportationFaresGatewayRateSheet.asp">http://www.gatewayorlando.com/content/t ... eSheet.asp</a><!-- m -->
David HI'm not sure what you mean. It looks pretty much the same to me in IE6, Mozilla 1.6 and Opera 7. Could you describe what looks different to you?
Also, you should use a doctype.The DOCTYPE is missing because it is study only, the page will never been formally published.
Here are the differences that I see...
IE6
Disney's All-Star Movies Resort [spacing] $70
Walt Disney World Resort
1991 West Buena Vista Drive
Lake Buena Vista, FL 32830
(407) 939-7000
Netscape 7.1
(No spacing between the resort name and rate quote, WDW on same line as resort name)
Disney's All-Star Movies Resort$70Walt Disney World Resort
1991 West Buena Vista Drive
Lake Buena Vista, FL 32830
(407) 939-7000
Opera
Disney's All-Star Movies Resort [spacing] $70
[spacing that apears to be several line breaks]
Walt Disney World Resort
1991 West Buena Vista Drive
Lake Buena Vista, FL 32830
(407) 939-7000
David H
I'll break down and actually purchase SnagIt later this PM.
<!-- m --><a class="postlink" href="http://www.techsmith.com/products/snagit/default.aspThe">http://www.techsmith.com/products/snagit/default.aspThe</a><!-- m --> DOCTYPE is missing because it is study only, the page will never been formally published.
The doctype is REQUIRED to force all browsers into a known state (standards compliance mode).Well, the browsers are now consistent, so onward to the next problem. I'm trying to get some space between the location name and the dollar amount. So why isn't the width being recognized? The values should be wide enough to put space between the two values.
David HI don't see what you mean. Of course your CSS files are linked to your local disk so they aren't in play. What do you mean by "why isn't the width being recognized?" What width?The page is displaying as:
Disney's All-Star Music Resort$70
I'd like to display as:
Disney's...Resort $70
The width that I am referring to is the width in the style that is on the page. View the source on the page <!-- m --><a class="postlink" href="http://www.gatewayorlando.com/content/_cssStudy.asp?showpage=yesYou're">http://www.gatewayorlando.com/content/_ ... =yesYou're</a><!-- m --> trying to apply block rules like width to what you've declared to be an inline element. Change your two styles to:
p.locationName
{
float: left;
}
p.rateQuote
{
float:left;
text-align: right;
width: 100px;
}
And fix your HTML.That's what I was looking for.
David H.
FYI - This was a STUDY only.
<!-- m --><a class="postlink" href="http://dictionary.reference.com/search?q=study">http://dictionary.reference.com/search?q=study</a><!-- m -->
css Study
<!-- m --><a class="postlink" href="http://www.gatewayorlando.com/content/_cssStudy.asp?showpage=yes">http://www.gatewayorlando.com/content/_ ... owpage=yes</a><!-- m -->
sample existing page
<!-- m --><a class="postlink" href="http://www.gatewayorlando.com/content/transportationFaresGatewayRateSheet.asp">http://www.gatewayorlando.com/content/t ... eSheet.asp</a><!-- m -->
David HI'm not sure what you mean. It looks pretty much the same to me in IE6, Mozilla 1.6 and Opera 7. Could you describe what looks different to you?
Also, you should use a doctype.The DOCTYPE is missing because it is study only, the page will never been formally published.
Here are the differences that I see...
IE6
Disney's All-Star Movies Resort [spacing] $70
Walt Disney World Resort
1991 West Buena Vista Drive
Lake Buena Vista, FL 32830
(407) 939-7000
Netscape 7.1
(No spacing between the resort name and rate quote, WDW on same line as resort name)
Disney's All-Star Movies Resort$70Walt Disney World Resort
1991 West Buena Vista Drive
Lake Buena Vista, FL 32830
(407) 939-7000
Opera
Disney's All-Star Movies Resort [spacing] $70
[spacing that apears to be several line breaks]
Walt Disney World Resort
1991 West Buena Vista Drive
Lake Buena Vista, FL 32830
(407) 939-7000
David H
I'll break down and actually purchase SnagIt later this PM.
<!-- m --><a class="postlink" href="http://www.techsmith.com/products/snagit/default.aspThe">http://www.techsmith.com/products/snagit/default.aspThe</a><!-- m --> DOCTYPE is missing because it is study only, the page will never been formally published.
The doctype is REQUIRED to force all browsers into a known state (standards compliance mode).Well, the browsers are now consistent, so onward to the next problem. I'm trying to get some space between the location name and the dollar amount. So why isn't the width being recognized? The values should be wide enough to put space between the two values.
David HI don't see what you mean. Of course your CSS files are linked to your local disk so they aren't in play. What do you mean by "why isn't the width being recognized?" What width?The page is displaying as:
Disney's All-Star Music Resort$70
I'd like to display as:
Disney's...Resort $70
The width that I am referring to is the width in the style that is on the page. View the source on the page <!-- m --><a class="postlink" href="http://www.gatewayorlando.com/content/_cssStudy.asp?showpage=yesYou're">http://www.gatewayorlando.com/content/_ ... =yesYou're</a><!-- m --> trying to apply block rules like width to what you've declared to be an inline element. Change your two styles to:
p.locationName
{
float: left;
}
p.rateQuote
{
float:left;
text-align: right;
width: 100px;
}
And fix your HTML.That's what I was looking for.
David H.
FYI - This was a STUDY only.
<!-- m --><a class="postlink" href="http://dictionary.reference.com/search?q=study">http://dictionary.reference.com/search?q=study</a><!-- m -->