Gossamer Forum: Products: Gossamer Links: Discussions: luna

Apr 15, 2006, 9:10 AM

rgbworld

User (325 posts)

Apr 15, 2006, 9:10 AM

Post #1 of 5

Shortcut

luna_core.css and IE Mac

I am testing the default luna template set and css in multiple browsers.
I am testing Windows(FireFox, IE) and Mac(FireFox, IE, Safari).

The default install has 1 css glitch specific to IE Mac 5.2.3 on OS 10.x.
It has to do with the ocwrapper/rightsidebar css styles.
Specifically, what appears to be the rightsidebar, or the right-margin of
the ocwrapper extends to the right of the wrapper by the distance of rightsidebar.

I have attached pics and will include my css fix.
Is it possible to apply this style fix only to IE/Mac? If so, how?

default luna_core.css:

Code:
#ocwrapper { 
/* background colour of left sidebar */ 
  border-left: 0px solid #e2e1eb; 
/* background colour of right sidebar */ 
  border-right: 200px solid #e2e1eb; 
  background: #e2e1eb; 
}

Fixed?. Use the background color of the page for border-right (below).
This "fixes" IE Mac, but breaks everything else, but it is the only way I could
find to "easily" make the luna template set work in IE Mac. It breaks the
other browsers by making the rightsidebar white ( no duh <g> ).

Code:
#ocwrapper { 
 /* background colour of left sidebar */ 
   border-left: 0px solid #e2e1eb; 
 /* background colour of right sidebar */ 
   border-right: 200px solid #ffffff; 
   background: #e2e1eb; 
 }

default colored ( used for 1 of the attached pics, to show what's really happening)

Code:
 #ocwrapper { 
  /* background colour of left sidebar */ 
    border-left: 0px solid #e2e1eb; 
  /* background colour of right sidebar */ 
    border-right: 200px solid #696969; 
    background: #e2e1eb; 
  } 
 #rightsidebar { 
   background: #DCDCDC; 
 }

I would like to fix this, because I am working on different templates and styles for GLinks,
and because my stuff inherits from luna, it HAS to work there first, and IE Mac doesn't.
I wouldn't worry about it except Apple insists on shipping IE (crap) with OSX, so
people are going to use it Unsure

.

Thanks for any help.

Chris
RGB World, Inc. - Software & Web Development.
rgbworld.com

Apr 16, 2006, 7:02 AM

aus_dave

User (276 posts)

Apr 16, 2006, 7:02 AM

Post #2 of 5

Shortcut

Re: [rgbworld] luna_core.css and IE Mac In reply to

You can add your IE Mac specific styles to a separate stylesheet and import it like so:

Code:
<style type="text/css">  
\/*  
@import "/static/luna/luna_ie5mac.css";  
*/  
</style>

I have just about given up coding for IE5 Mac now. Us Mac users are enough of a minority as it is without worrying about a minority browser too. It is surpisingly CSS compliant but very ugly compared to the newer alternatives.

I can't remember what the default Dock icons were in 10.3 when I installed it - was IE5 in the Dock or was Safari the only browser? If IE5 is not in the Dock the 'average' user is unlikely to find it, let alone use it :).

Apr 20, 2006, 7:17 PM

rgbworld

User (325 posts)

Apr 20, 2006, 7:17 PM

Post #3 of 5

Shortcut

Re: [rgbworld] luna_core.css and IE Mac In reply to

In Reply To:

The default install has 1 css glitch specific to IE Mac 5.2.3 on OS 10.x.
It has to do with the ocwrapper/rightsidebar css styles.
Specifically, what appears to be the rightsidebar, or the right-margin of
the ocwrapper extends to the right of the wrapper by the distance of rightsidebar.[/quote]

To fix the rightsidebar background-color overflow (Mac IE 5 and luna) is pretty simple.

1) Define ocwrapper to a Mac IE 5 specific style. All browsers will see this definition.

2) Override border-right back to the correct style. IE Mac doesnt see the override
due to the IE factor.

Changes to luna_core.css are bolded. New code is red.

Code:
 #ocwrapper {  
/* background colour of left sidebar */  
  border-left: 0px solid #e2e1eb;  
/* background colour of right sidebar */  
  border-right: 190px solid #ffffff;  
  background: #e2e1eb;  
}   

/* commented backslash hack v2 \*/  
#ocwrapper { border-right: 200px solid #e2e1eb; }  
/* recover from hack */

I do not style for specific browsers per-sey, and I do not want to do so especially for IE 5 Mac.
But, the above css does fix the out-of-the-box luna css appearance. I have done extensive testing
of luna, using many different browsers. I found only 2 glitches in all my tests, and I have charts!

So, anyways that was 1 of 2 fixes. The other css fix is wrt a Disappearing rightshadow...
Specific to IE 6 windows. The 2nd fix is simply adding position:relative to the .shadowright class.

With those 2 edits, luna templates display properly in Mac(IE,Safari,FireFox,Opera) and Win(IE6,FireFox).
I know there are other browsers, but thats all I have time for.

Footnote: Any style that overrides ocwrapper to change either sidebar size, will have
to reapply the "commented backslash hack" in order to keep the 2nd fix in-place.

Hope this helps someone else.

Chris

RGB World, Inc. - Software & Web Development.
rgbworld.com

Last edited by:

rgbworld: Apr 20, 2006, 7:19 PM

Apr 21, 2006, 6:10 PM

brewt

Staff (4101 posts)

Apr 21, 2006, 6:10 PM

Post #4 of 5

Shortcut

Re: [rgbworld] luna_core.css and IE Mac In reply to

Just to let you know, I'm not ignoring your posts :) I took a few days off last week and it's taking a while to catch up on things. I'm leaving these CSS posts for later since they usually take a little longer to figure out.

Adrian

Apr 22, 2006, 5:13 AM

rgbworld

User (325 posts)

Apr 22, 2006, 5:13 AM

Post #5 of 5

Shortcut

Re: [brewt] luna_core.css and IE Mac In reply to

No problem.
They usually take a while to figure out too. <g>

If you ever log into my dev site, I have several templates that you can
dynamically switch between. The names are:

luna: No mods at all. No css fixes. Does not look good in Mac IE 5.
luna_2C_Banner: Fixed width. Places banner ads in header - login moved to rightsidebar.
Added Mac IE 5 css fix in previous post. FYI, I need to make 1 edit to that css fix.
luna_3C_Banner: 98% wide (editable). 3 Column Fluid center with banner ads in header.
Added Mac IE 5 css fix. Added a min-width on fluid center-column. Very cool.
Simply add code to include_header.html and include_footer.html and whola min-width!

xtra: This set has my 2 new includes which move errors to content and "provides" an alt banner ad location.
Keeps sidebar content from shifting down when an error or message appears. This is "my" luna.
Incorporates Mac IE 5 css fix, min-width 'new' css, and disappearing right shadow css fix which showed up
when I split the contentwrapper/leftshadow into 2 divs (allowing 2nd new include between them).
xtra_2C_Banner: Fixed width. Places banner ads in header - login moved to rightsidebar. Inherits 'xtra'.
xtra_2C_Banner2: Same as xtra_2C_Banner showing alternate banner ad placement.
xtra_3C_Banner: 98% wide. 3 Column Fluid center with banner ads in header. min-width. Inherits 'xtra'.
xtra_3C_Banner2: Same as xtra_3C_Banner showing alternate banner ad placement. This is actually
different than what it looks . I have removed logo/login from header contents, leaving only navbar in header.
Logo is actually in leftsidebar, Banner is in new include_content.html, Login is in rightsidebar. So if I was to
remove the navbar from header, I would have a 3 column style with nothing above. Not sure where I am headed
with this one, but it shows alt banner location. :-)

All fixes and new min-width style works in ALL browsers tested.
When testing 'xtra' templates, be sure to try adding a link and signing-in without adding anything to the
form fields. This will show the proper placement of errors/messages IMHO.

I am still working on this, but so far, it is perfect.

Can I unprotect my dev install of GLinks so I can use it as a demo site for purpose of this board?

Thanks for looking at this stuff whenever you have the time. No rush

Chris
RGB World, Inc. - Software & Web Development.
rgbworld.com

luna_core.css and IE Mac

Attached Files:

Last edited by: