Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 27th, 2007, 02:47 PM
Registered User
 
Join Date: Jul 2007
Location: , CO, USA.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default background-color: white; covers text

WROX: ASP.NET 2.0 Website Programming, Chapter 2, p.35, default.aspx MainContent uses 3beers.jpg with some associated text. When I bring up this page in Firefox 2.0.0.5, it displays correctly. When I bring up the page in IE6 the image does not appear. Through trial and error, I discovered that the image is covered by "whiteness". The amount of the image that is covered is determined by the amount of text associated with the image. If I remove all the text, all the image appears in IE6. If I put only a few words, only the top strip of the image is covered.

I went into the TemplateMonster/default.css file and removed the background-color: white; from the #centercol style class, and except for there not being white in background of the center content area, the page displays correctly.

This behavior does not occur in Firefox.

Has anyone else experienced this?
Is there a correction for this?

(Yet another reason to switch to Firefox. javascript:insertsmilie(':D')
Big Smile :D )

Reply With Quote
  #2 (permalink)  
Old July 28th, 2007, 04:44 PM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

Do you have two page elements at the same location (overlayed)? That is what it sounds like. It also sounds like the text element is later in the page (and thus a higher z-index) such that it is on top of the image. If the text element has a white background there's no reason it should NOT hide the image. It actually sounds like FireFox might not be respecting the styling, although I would expect that from I.E. instead.

-Peter
Reply With Quote
  #3 (permalink)  
Old August 1st, 2007, 12:32 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

:)Oh just wait, Firefox has it's own batch of fun little bugs for you to run into. Though I admit, I do generally prefer it just because it's a more powerful program. The developer add ons for FF allow you to turn it into an invaluable design tool especially for CSS. Tell it to throw borders around everything and suddenly you can see what the elements are doing, it's pretty sweet.

I agree, if you've got a white background overlaid on an image, that's not something that happens easily. The fix should be simple though.

Code:
img {
z-index:2;
}
Or whatever is the largest z-index for your stylesheet. If that doesn't work, give us some more info to chew on;)

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #4 (permalink)  
Old August 1st, 2007, 04:53 PM
Registered User
 
Join Date: Jul 2007
Location: , CO, USA.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Well, here's as much as I can find of the situation.

As nearly as I can see, my default.aspx is identical to p.36 of the text, except that I added more of the text from the web page example (p.28-29).

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Template.master"
  CodeFile="Default.aspx.cs" Inherits="_Default" Title="The Beer House" %>
<asp:Content ID="Content1" ContentPlaceHolderID="RightContent" Runat="Server">
  <b>If you're interested in licensing or selling</b> in your country, please...
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" Runat="Server">
  <asp:Image ID="imgBeers" runat="server"
    ImageUrl="~/Images/3beers.jpg" ImageAlign="left" hspace="8" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc iaculis, arcu a iaculis
      condimentum, justo sapien sagittis neque, nec commodo nulla purus vel lectus. Suspendisse
      lorem. Aenean lacus urna, molestie sed, blandit at, suscipit non, tortor. Donec
      scelerisque dignissim eros. Proin pellentesque pede placerat lacus. Suspendisse
      gravida ligula nec pede. Donec tincidunt. Sed vitae wisi non enim dapibus sodales.
      Etiam dapibus tempor ipsum.
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftContent" Runat="Server">

</asp:Content>

Reply With Quote
  #5 (permalink)  
Old August 1st, 2007, 05:25 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

What's your stylesheet?

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #6 (permalink)  
Old August 2nd, 2007, 08:57 PM
Registered User
 
Join Date: Jul 2007
Location: , CO, USA.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I used the default.css that is in the download for the course. However, I just now compared it to the book and the book has:

#centercol
{
   position: relative inherit;
   margin-left: 200px;
   padding: 0px;
   background-color: white;
   height: 500px;
}

The downloaded default.css was
#centercol
{
   position: relative;
   margin-left: 200px;
   padding: 0px;
   background-color: white;
}

After adding the "inherit" to the position statement, the web page appears correctly in IE.

Thanks to those who responded!

I'm still interested in why this prevented it from displaying in IE, but not Firefox. Quirk in IE? Bug in Firefox (ie. it shouldn't have displayed in Firefox)?

What exactly does the "inherit" parameter mean in this statement?

Reply With Quote
  #7 (permalink)  
Old August 3rd, 2007, 12:21 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

inherit makes #centercol take the position value of it's parent. Except that #centercol already has been explicitly defined the value relative. For it to make sense (ok, to ME anyway), it's parent would have to have position value that complements relative. What IS the position value of the #centercol's parent element? For one thing, I've never seen position take two values before. Unless this technique is a workaround for a browser bug, I'm a little confused by what it's doing.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

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

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
change color of background meena88 C# 2005 3 December 1st, 2009 04:48 AM
Background Color matrix ArnieStewart BOOK: Professional SQL Server Reporting Services ISBN: 0-7645-6878-7 3 October 21st, 2008 01:12 AM
mdi-background color avats General .NET 1 February 28th, 2008 10:25 AM
background-color disappears harpua CSS Cascading Style Sheets 1 August 19th, 2005 04:53 PM
Changing Text Box Background Color rodmcleay Javascript How-To 9 December 11th, 2003 05:07 AM



All times are GMT -4. The time now is 12:53 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.