Leaf theme in IE

J Shizzle@poppy... - April 29, 2005 - 22:19

I have found one other posting on this issue, but nobody responded to it. The tabs for the primary links do not line up in Internet Explorer. I believe this issue has to do with the

tags. I have spend hours trying to figure out what's going on. The closest that I can come is that the line:

#navigation li {
display: inline;
}

will align all of the tabs in IE but then mess them up in Firefox. This is extremely frustrating, but I'm sure that someone who knows php better could figure it out pretty easily. I just designed an entire site around this theme and then became aware of the issue with IE.

Any help would be greatly appreciated.

Thanks!

Jeremy

» Login or register to post comments

same issue for me

shane - April 29, 2005 - 22:23

I used the "leaf" theme as a starting point, and then found out there were problems with the CSS for both Internet Explorer AND for Safari on Macs. In IE the "Primary links" are rendered one after the other on newlines; while in REAL browsers, they're rendered side by side like they should be.

In Safari, the background image for the main content area is NOT rendered (white 1 pixel high image), so that the background color of the entire page is what's loaded.

Seems like the "leaf" theme has a bunch of CSS portability issues. This highlights why I have a strong distaste for CSS - it just plain ain't portable - thanks Microsucks...

(Yes, I know you can do whiz-bang cool things with CSS you can't do with standard html...)

problem with leaf theme under internet explorer

adriatichero - May 10, 2005 - 22:20

A nice theme that simply does not work on IE. Anyone who was able to fix this issue? Thanks!

My version of leaf

Thox - May 10, 2005 - 23:13

The "leaf" theme is based off this Nucleus theme: http://skins.nucleuscms.org/blog/21

I created a "Nucleus" theme and several themes based on it: http://brandedthoughts.co.uk/node/15

It works fine in IE 6, Firefox 1+, Safari 1.2, and Opera 7+. I've not tried IE on Mac.

same problem

bobo - May 17, 2005 - 12:20

i'm having exactly the same problem. are you should the problem just doesn't occur with the non-drupal version?

Hey there

bobo - May 18, 2005 - 10:09

this works fine:

/*This is the LEAF skin, made by Ivan for Nucleus CMS*/
/*I am not a pro in CSS - If you are one and if you think it can be done better, by all means go ahead and adjust to your needs*/
/*I've tried my best to comment on most of the styles*/

/*BASIC STUFF*/
/*Link styling*/
a:link, a:visited{
	color: #23598C;
	text-decoration: none;
}
a:hover, a:active{
	color: black;
}
/*Image*/
img{
	border: none;
}
/*This is used for hidden stuff, stuff that you don't want people to see with CSS enabled*/
/*Try disabling CSS and you'll see some messages that you don't see with CSS enabled*/
.more-link, .hidden{
	display: none;
}
/*Use this to centerize any image/text*/
.centerize{
	text-align: center;
}
/*MAIN STRUCTURE*/
/*Don't edit if you know what's good for you*/
body{
	color: #4C4C4C;
	font-size: 11px;
	font-family: Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
	background: #123454 url(01_bg.gif) top repeat-x;
	padding: 20px 0 20px 0;
	text-align: center;
}
#wrapper {
	width: 700px;
	margin: auto;
	background: white url(01_bodybg.jpg) repeat-y;
	text-align: left;
}
/*The header image*/
#header{
	position: relative;
	width: 700px;
	height: 151px;
	margin: auto;
	background: url(01_header01.jpg) no-repeat;
}
/*The container - edit "230" to your desired width for the sidebar (lines 55, 58, 62)*/
#container{
	width: 100%;
	float: left;
	margin-right: -230px;
}
#content{
	margin-right: 230px;
	padding: 25px 0;
}
#sidebar{
	width: 220px;
	float: right;
	padding: 25px 5px;
	text-align: left;
}
#footer{
	width: 700px;
	margin: auto;
	padding: 20px 0 0 0;
	background: url(01_footer.jpg) top no-repeat;
}
/*Credits part is where the copyrights/xhtml/css validation stuff will be*/
#credits{
	font-size: 10px;
	text-align: center;
	color: #F7F7F7;
}
#credits a:link, #credits a:visited{
	color: #CFE6FD;
}
#credits a:hover, #credits a:active{
	color: white;
}
/*Ignore this*/
.clearing{
	height: 0;
	clear: both;
}
/*THE MAIN TITLE - YOUR BLOG NAME ON TOP OF THE HEADER*/
#header h1{
	position: absolute;
	top: 16px;
	left: 24px;
	font-size: 20px;
	line-height: 20px;
	margin: 0;
}

/* START OF THE BIT MATTHEW MESSED WITH */

/*THE NAVIGATION - More detailed stuff in 01_navigation.css*/
#navigation{
	font-size: 11px;
	width: 694px;
	height: 22px;
	position: absolute;
	top: 131px; /* MFC - was top: 129px */
	left: 6px; /* MFC - was left: 3px */
}
#navigation ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
#navigation li{
	background: none;
	display: inline; /* MFC - new */
	padding: 0; /* MFC - new */
	margin: 0; /* MFC - new */
}

/*THIS PART IS FOR THE NAVIGATION LINKS*/
/*.nav1 a:link, .nav1 a:visited, .nav2 a:link, .nav2 a:visited, .nav3 a:link, .nav3 a:visited{*/
#navigation li a:link, #navigation li a:visited {
	color: #4E4E4E;
	width: 80px;
	height: 20px;
	line-height: 20px;
	background: url(01_linkbg1.gif) top repeat-y;
	padding: 0 6px 1px; /* MFC - was padding: 0 */
	margin: 0; /* MFC - was margin-right: 3px */
	float: left; 
/*	display: block; /* MFC - remove */
/*	overflow: hidden; /* MFC - remove */
}
	
/*HOVER EFFECTS*/
#navigation li a:hover, #navigation li a:active {
	background: url(01_linkbg2.gif) top repeat-y;
	padding: 1px 6px 0; /* MFC - new */
/*	margin: 1px 3px 0 0; /* MFC - remove */
}

/* END OF THE BIT MATTHEW MESSED WITH */

/*THE HEADERS (h2: Main titles, h3: Blog and Sidebar titles, h4: Comment names/userlinks)*/
h2{
	color: #3E565F;
	margin: 0 0 3px 0;
	font-size: 16px;
}
/*h3{*/
#sidebar h2 {
	color: #3E565F;
	margin: 0 0 8px 18px;
	font-size: 14px;
}

#sidebar img { margin-left: 18px; }

h4{
	font-size: 11px;
}
/*Sub structure - To create the margins of the body (where text will be placed)*/
.contentdiv{
	margin: 0 15px 0 22px;
}
.sidebardiv{
	margin: 0 22px 0 15px;
}
/*The image styling of your blog*/
.contentbody img{
	border: 1px solid black;
}
/*COMMENTS STYLING*/
.c_commentbody{
	padding: 0 0 5px 0;
	background: url(01_hdot.gif) bottom repeat-x;
}
/*User links on comments made (eg. Ivan wrote:)*/
.c_userlink{
	margin: 0 0 5px 0;
}
/*Time stamp info in comments made*/
.c_commentinfo{
	font-size: 10px;
	margin: 3px 0 0 0;
	padding: 0 0 0 13px;
	background: url(01_item1.gif) 0 1px no-repeat;
}
/*THE STYLING OF THE BODY OF CONTENTS AND SIDEBAR*/
.box, .contentbody, .commentbody {
	margin: 0;
	padding: 0 0 30px 43px;
	text-align: justify;
}
.block {
	margin: 0 0 20px 0;
	padding: 0;
}
/*THIS PART IS THE SIDEBAR'S INDIVIDUAL DIVS*/
/*Note that it doesn't have any styling, but it's here in case you want to add some styles*/
#sidebar .content {
	padding: 0;
	margin: 0 5px;
}

#sidebar .content ul {
list-style-type: none;
}

#sidebar .content ul li {
list-style: none;
padding-left: 10px;
}

/*THIS PART IS TO STYLE THE BACKGROUND IMAGES (THE QUOTE ON THE LEFT)*/
/*You can create different image on your on, but only if you know what you're doing should you edit this part*/
.divweblog .contentbody, .divarchives .contentbody, .divarchivelist .contentbody, .diverror .contentbody, .divmemberinfo .contentbody,
.divsendmessage .contentbody, .divcommentitem .contentbody, .divsearch .contentbody{
	background: url(01_quote.gif) 0 3px no-repeat;
}
/*A different background for comments made*/
.box {
	background: url(01_quote1.gif) 0 3px no-repeat;
}
/*A different background for the admin (in the comments made area)*/
.divcommentsmade .id1{
	background: url(01_quote4.gif) 0 3px no-repeat;
}
/*Add comment form's background*/
/*.divaddcomment .contentbody{*/
.box {
	background: url(01_quote3.gif) 0 3px no-repeat;
}
/*MORE DETAILED STUFF - Item details of your blog items*/
.itemdetails{
	text-align: right;
	padding: 5px 0 0 0;
	background: url(01_hdot.gif) top repeat-x;
}
/*Posted by*/
.item1{
	padding: 0 0 0 13px;
	margin: 0 0 0 12px;
	background: url(01_item1.gif) 0 1px no-repeat;
}
/*Category*/
.item2{
	padding: 0 0 0 13px;
	margin: 0 0 0 12px;
	background: url(01_item2.gif) 0 3px no-repeat;
}
/*Comments*/
.item3{
	padding: 0 0 0 15px;
	margin: 0 0 0 12px;
	background: url(01_item3.gif) 0 3px no-repeat;
}
/*STYLING OF SIDE TITLES*/
/*You can remove all parts here if you do not wish to use images as your side titles*/
.about h3{
	height: 23px;
	text-indent: -9999px;
	margin: 0 0 2px 0;
	background: url(01_s_about.gif) no-repeat;
}
.login h3{
	height: 23px;
	text-indent: -9999px;
	margin: 0 0 2px 0;
	background: url(01_s_login.gif) no-repeat;
}
.categories h3{
	height: 23px;
	text-indent: -9999px;
	margin: 0 0 2px 0;
	background: url(01_s_categories.gif) no-repeat;
}
.search h3{
	height: 23px;
	text-indent: -9999px;
	margin: 0 0 2px 0;
	background: url(01_s_search.gif) no-repeat;
}
.links h3{
	height: 23px;
	text-indent: -9999px;
	margin: 0 0 2px 0;
	background: url(01_s_links.gif) no-repeat;
}
/*MAIN TITLES*/
/*You can remove all parts here if you do not wish to use images as your main titles*/
h2.weblog, h2.comments, h2.commentsmade, h2.addcomment, h2.archives, h2.error, h2.member, h2.sendmessage, h2.searchpage{
	height: 23px;
	text-indent: -9999px;
	margin: 0 0 5px 0;
}
h2.weblog{
	background: url(01_m_weblog.gif) no-repeat;
}
h2.comments{
	background: url(01_m_comments.gif) no-repeat;
}
h2.commentsmade{
	background: url(01_m_commentsmade.gif) no-repeat;
}
.box h2 {
	background: url(01_m_addcomment.gif) no-repeat;
	text-indent: -9999px;
}
h2.archives{
	background: url(01_m_archives.gif) no-repeat;
}
h2.error{
	background: url(01_m_error.gif) no-repeat;
}
h2.member{
	background: url(01_m_member.gif) no-repeat;
}
h2.sendmessage{
	background: url(01_m_sendmessage.gif) no-repeat;
}
h2.searchpage{
	background: url(01_m_search.gif) no-repeat;
}
/*FORM STYLING*/
form{
	margin: 0;
	text-align: left;
}
/*Styling for all form fields*/
.formfield{
	width: 130px;
	font-size: 11px;
	font-family: Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
	margin: 0 0 2px 0;
	color: #494949;
	border-top: 1px solid #868686;
	border-left: 1px solid #868686;
	border-bottom: 1px solid #D4D2CF;
	border-right: 1px solid #D4D2CF;
}
/*Form fields on focus effect (when user click on that input field)*/
.formfield:focus{
	border: 1px solid black;
}
/*Form's buttons*/
.formbutton{
	font-size: 11px;
	font-family: Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
	margin: 1px 0 0 0;
	padding: 1px 10px;
	color: #494949;
	background: white;
	border-top: 1px solid #D4D2CF;
	border-left: 1px solid #D4D2CF;
	border-bottom: 1px solid #868686;
	border-right: 1px solid #868686;
}
/*Don't show textarea scrollbar on IE*/
textarea{
	overflow: hidden;
}
/*Wider formfields for comment and mailform*/
.commentform .formfield, .mailform .formfield{
	width: 340px;
}
/*Add background to comment textarea*/
.box .content textarea{
	background: white url(01_txbg.gif) center center no-repeat;
	width: 370px;
}
/*STYLING OF THE FORMS BACKGROUND, AND THE LITTLE ROUNDED TOPS*/
/*Add comment form and mailform (same size)*/
.box form, .divaddcomment form, .divsendmessage form{
	width: 390px;
	padding-top: 5px;
	background: #E2EDF0 url(01_mountaintop.gif) top no-repeat;
}
.box form * {
	margin-left: 5px;
}
/*Login form and search form (same size)*/
.login form, .search form{
	width: 184px;
	background: #E2EDF0 url(01_mountaintop2.gif) top no-repeat;
}
.loginform, .searchform{
	padding: 10px;
}
/*THE LIST STYLES*/
ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
li{
	padding: 0 0 0 9px;
	margin: 0 0 2px 0;
	background: url(01_arrow.gif) 0 6px no-repeat;
}
/*THE SEARCH HIGHLIGHT*/
.highlight{
	font-weight: bold;
	text-decoration: underline;
}
/*Comment error - For Nucleus v3.2*/
div.error{
	color: red;
	font-weight: bold;
}



textarea {
width: 440px;
}

Very Helpful

iDreamAwake - June 23, 2005 - 01:22

Thank you so much for this fix. The theme works perfectly on IE and Opera now, along with Firefox (which the original worked with also).

thank you! problem solved

innabar - January 23, 2006 - 17:00

this solved my problem in IE, haven't tested it on other browsers.
is there a way to change the standard release of the theme so other developers don't waste time looking for this solution?

arrows

amagab - May 22, 2005 - 05:22

How did you remove/change the arrows in the navigation menu?

Next time, please consider

Bèr Kessels - May 18, 2005 - 10:28

Next time, please consider filing a real bug report.

[Bèr Kessels | Drupal services www.webschuur.com]

no leaf listing

NukeHavoc - February 8, 2006 - 18:55

I just tried to submit this as a bug report, since it really needs to find its way into the live theme, but there's no listing for "leaf" (leaves and leaf_smarty, but no leaf). Who do we contact about that?

Problem Solved

Ciro Duran - February 23, 2006 - 03:18

This is an important issue. I downloaded this theme 2 weeks ago, this thread dates from May and still has the same problem, which the CSS posted solves. I'm trying to contact the original developer.

Thanks for solving the problem.

Confused

sepeck - February 23, 2006 - 04:21

You mean this link? http://drupal.org/project/leaf I found it on the theme download page.

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain