Yet another browser compatibility problem...

I get repeating background graphics across "fake table" cell

Page 1 of 1

7 Replies - 1890 Views - Last Post: 11 January 2010 - 09:14 PM

#1 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Yet another browser compatibility problem...

Posted 27 December 2009 - 06:58 PM

This site I'm working on functions fine, and looks correct across all browsers and platforms as long as I don't add any graphics.

Here is the site: LINK
Here is the CSS: CSS

It displays correctly in IE 8 and Firefox 3.5. When I open it in Opera, Chrome and Safari, the background images are tiled as if they aren't large enough to take up the space of the page. I've made the cell borders visible to help visualize what's happening.

I could build this page with an HTML table, but of course, it doesn't display well. So I tried to recreate the same layout with CSS.

After I saw this problem with the other browsers, I tried removing the original background images and placing a background inside each CSS cell. This didn't work out.

SO, how can I go about keeping this layout so I can use it with all browsers?

Is This A Good Question/Topic? 0
  • +

Replies To: Yet another browser compatibility problem...

#2 jjsaw5  Icon User is offline

  • I must break you
  • member icon

Reputation: 90
  • View blog
  • Posts: 3,060
  • Joined: 04-January 08

Re: Yet another browser compatibility problem...

Posted 28 December 2009 - 06:57 AM

You are probably going to need to code your css to handle each browser. Unfortunately each of these browsers reads your css just a little bit different then the other, so you have to accommodate for it in your code. There are lots of on-line tutorials and things that will show you what you need to do to get something to work in multiple browsers.

If I have some time I’ll try and take a look at your code later today, but I would start by seeing if you can find a “hack” for your css that will fix your issues with these browsers.
Was This Post Helpful? 0
  • +
  • -

#3 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Re: Yet another browser compatibility problem...

Posted 28 December 2009 - 07:46 AM

Thanks for the reply, JJ.

I'm certainly not above customizing the page/css for each browser. I just wish I could figure out how to get it to look right to begin with! :rolleyes:

If you could point me in the right direction as far as fixing the graphic/cross-compatibility and how to specify code/css by browser/platform, that would be great.

This post has been edited by Galaxy_Stranger: 28 December 2009 - 07:47 AM

Was This Post Helpful? 0
  • +
  • -

#4 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Re: Yet another browser compatibility problem...

Posted 06 January 2010 - 11:56 PM

I've been picking at this all week to find a solution. Let me spell-out from scratch what I'm trying to accomplish. (If I can fix this via pure CSS, I can use PHP to decide how to display the page based on the browser. IE 8 and Firefox 3.5 display all the content exactly as I want - except for Firefox on Linux. Chrome, Safari and Opera seem to follow completely different rules for interpreting CSS.)

I used to use a lot of HTML tables to organize pages. Of course, CSS is much more flexible, etc. So, my first inclination is to emulate the layout I get with tables. If I don't need content, I can simply remove it from the template. If I want to add content - there's already a space for it. I usually have a header section at the top, a footer at the bottom, a menu on the left and content in the center, which is resizeable as the content changes.

So, a table would look like this:
<table>
	 <tr>
		  <td>usually empty upper-left corner</td>
		  <td>Header Content</td>
		  <td>usually empty upper-right corner</td>
	 </tr>
	 <tr>
		  <td>Menu Content</td>
		  <td>Main Body Content</td>
		  <td>usually empty right side</td>
	 </tr>
	 <tr>
		  <td>usually empty bottom-left corner</td>
		  <td>Footer Content</td>
		  <td>usually empty bottom-right corner</td>
	 </tr>
</table>


Similarly, the CSS version looks like this:
<div id="Page_Container">
	 <div id="Top_Row_Container">
		  <div></div>
		  <div id="Header_Content"></div>
		  <div></div>
	 </div>
	 <div id="Middle_Row_Container">
		  <div id="Menu_Content"></div>
		  <div id="Main_Body_Content"></div>
		  <div></div>
	 </div>
	 <div id="Bottom_Row_Container">
		  <div></div>
		  <div id="Footer_Content"></div>
		  <div></div>
	 </div>
</div>


So, what I've done is define background images for the Row Containers. The Top and Bottom Row images are static and don't move - I've defined the width of the Page Container at 800px. The Middle Row Container image repeats vertically.

What it looks like is happening is that the individual content cells are INHERITING the background images from the Row Container they're nested in. The issue is completely graphical - all other content displays and functions as intended.

I've been trying to find something on nesting precedence, but I haven't found much of anything I didn't already know...

Anyone have any ideas?

This post has been edited by Galaxy_Stranger: 07 January 2010 - 12:22 AM

Was This Post Helpful? 0
  • +
  • -

#5 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Yet another browser compatibility problem...

Posted 07 January 2010 - 09:07 AM

My suggestion is to loose the table-row and table-cell display settings - they aren't necessary and they screw with how your divs work - you mine-as-well use tables. Anyways, look into a javascrtipt called Curvy corners, which will create your rounded corners. Then CSS3 has drop shadow support, legacy browsers won't see it but if you put a contrasting color as the background (maybe #666666) it will still look fine. Anyways, write back if you have issues. Also - have you installed firebug. Makes testing the sites way easier.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#6 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Re: Yet another browser compatibility problem...

Posted 09 January 2010 - 01:13 PM

Thanks for the reply, Greg!

I'm definitely going to check out Firebug.

What would be the "normal" way of displaying this content with divs and css without trying to emulate tables? It's not just the drop-shadow that's important - I have to use these graphics specifically.

This post has been edited by Galaxy_Stranger: 09 January 2010 - 01:13 PM

Was This Post Helpful? 0
  • +
  • -

#7 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: Yet another browser compatibility problem...

Posted 09 January 2010 - 07:25 PM

I have no experience using table-row or anything related in css before so i don't really know how that works but trying to emulate a table in css is definitely a difficult thing for me...

There are many ways to create a drop shadow page.

I take my blog created for a subject in my school.
http://designdevelop123.blogspot.com/

Which uses the "easier" way imo.

I'll just talk about it briefly

1. Just create a 1/2 a page image of your drop shadow , make that as your body background non repeat.

Posted Image
The above img is not really your drop shadow but you should get an idea.

2. Create another dropshadow that repeats as long as your content. Place that in a div that contains your content.

Posted Image

At this point you have a dropshadow header, drop shadow background but no footer !!!

3. Create your footer image (even if it is just a white img)

Set it in another div like your footer div

Posted Image


This is 1 way which how i do drop shadow, and other site out there.
However there are other ways too but i think the way i do is easiers.

There is 1 slight disadvantage though...you got confirm the width that you want for you page so you can create those images.
If you decided to change the page width at a later date, you got to do those image all over again but this problem to me is a trivial 1.

This post has been edited by aklo: 09 January 2010 - 07:29 PM

Was This Post Helpful? 0
  • +
  • -

#8 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Re: Yet another browser compatibility problem...

Posted 11 January 2010 - 09:14 PM

Thanks for the info, Aklo. That's a great approach.

I'm going to start from scratch again and see what I can get from that. The basic problem is that Chrome and related browsers are having the "table cells" inherit the background image from the parent div in which they're nested. If I can avoid that, I'm gold, otherwise I'll need a new approach.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1