MyBB Community Forums

Pages: 1 2

Hey there, I'm developing a theme:
http://img690.imageshack.us/img690/972/catturasg.png
http://img535.imageshack.us/img535/6320/cattura2f.png

but with safari and firefox:
http://img121.imageshack.us/img121/5329/cattura3k.png

In the original wordpress theme there isn't this problem!
How could I fix it?

Header:

<div id="header_links">
<div id="pagemenucontainer">
					<ul id="pagemenu">
<li><a href="{$mybb->settings['bburl']}/index.php">Home</a>
						<li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
					<li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
					<li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
					</ul>
                    </div>

<a href="{$mybb->settings['bburl']}/misc.php?action=syndication"><img src="images/mobileworld/rss.png" class="header_icon"></a>
<a href="#"><img src="images/mobileworld/twitter.png" class="header_icon"></a>
<div style="margin-left:710px; margin-top:-40px;">
<div id="search">
<form method="post" action="search.php"  id="searchform" >
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" name="s" id="s" value="Search" onfocus="if(this.value == 'Search') { this.value=''; }" onblur="if(this.value=='') { this.value='Search'; }" maxlength="30" />
<input type="image" src="images/mobileworld/search.gif" style="border:0; vertical-align: top; margin-top:-20px;" />
</form></div>
</div>
</div>
<div id="header_logo"><div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div></div>	

<div id="categories_links">
<div class="navcontainer">
					<ul id="nav">
	<li><a href="#">Category 1</a>
	<li><a href="#">Category 2</a>	
<li><a href="#">Category 3</a>
<li><a href="#">Category 4</a>
	<li><a href="#">Category 5</a>	
<li><a href="#">Category 6</a>
<li><a href="#">Category 7</a>
	<li><a href="#">Category 8</a>	
					</ul>
			</div>		
				</div>
<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
		
			<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>
		</div>
		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			<navigation>
			<br />

Navigation CSS:

/* NAVIGATION MENUS */

#pagemenucontainer {
	height: 30px;
    margin-top: 16px;
    padding: 0 4px 0 8px;
    background: url(images/mobileworld/pagenav-background.png) left top repeat-x;
    -moz-border-radius: 5px 5px 0 0;
    -khtml-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    float: left;
	}
	
#pagemenu {
	height: 30px;
    float: left;
	}

#pagemenu, #pagemenu ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	}
#pagemenu {
	margin-bottom: 1px;
	}
	
#pagemenu ul {
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}
	
#pagemenu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu li a, #pagemenu li a:link {
	color: #353f45;
	display: block;
    margin: 6px 6px 0 0;
	padding: 5px 15px;
	text-decoration: none;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
    border: 2px solid #eaeaeb;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	}
	
#pagemenu li a:hover, #pagemenu li a:active{
	color: #c23403;
	display: block;
    border: 2px solid #d3d6d9;
    background: #fff;
    text-decoration: none;
	}
	
#pagemenu  li.current_page_item a {
	color: #c23403;
    border: 2px solid #d3d6d9;
    background: #fff;
    text-decoration: none;
	}

#pagemenu li:hover, #pagemenu li.sfhover { 
	position: static;
	}
	


.navcontainer {
	height: 40px;
    background: url(images/mobileworld/nav-background.png) top left repeat-x;
    padding-left: 8px;
	}
	
#nav {
	height: 40px;
	}

#nav, #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	}
#nav {
	margin-bottom: 1px;
	}
	
#nav ul {
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}
	
#nav li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav li a, #nav li a:link {
	color: #fff;
	display: block;
    margin: 0px 6px 0px 0;
	padding: 14px 14px;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
    font-family: Arial, Helvetica, Sans-serif;
    text-shadow: 0 1px 0 #2f3e46;
	}
	
#nav li a:hover, #nav li a:active {
	color: #fff;
	display: block;
	text-decoration: none;
    background: url(images/mobileworld/nav-background-hover.png) top left repeat-x;
    text-shadow: 0 1px 0 #ac2f04;
	}
	
#nav  li.current-cat a {
	color:#fff;
    background: url(images/mobileworld/nav-background-hover.png) top left repeat-x;
    text-shadow: 0 1px 0 #ac2f04;
	}

#nav li:hover, #nav li.sfhover { 
	position: static;
	}

Link to the WORDPRESS THEME:
http://newwpthemes.com/livedemo/?wptheme=MobileWorld

uhh, I faced this problem in one of my themes. Did you copied the CSS from WordPress?

I forget how I fixed it, its something with the CSS I can tell you that, I will post as soon as I remember.

Its something with the link css codes.

Yes, I copied the CSS of the menus only!

yes, thats what causing the problem, I too copied the css and had this same problem. Try editing the css one bye one or in chrome inspect the element and deselect the element's css one by one to see what causing the problem.

I didn't get the last part but if you want a demo:
http://mythemes.netsons.org/

(Click Quick theme)

Check that your navigation CSS file has the extension .css. Doesn't look like it from here.

Looks like you don't have categories_links defined in your css.

@Scoutie that isn't the problem, because I created it clicking: Add a stylesheet.
@Labrocca I looked the CSS of the theme and that ID isn't reclamed.

Once I had this problem with the Gamesmania theme, but I don't know how Infranight fixed it.
I tried to understand what he changed but I can't. Now he's on vacation..

The stylesheet you added didn't have the extension .css though. You need to make sure it has it or else it won't work.

Sorry for this but: WHAT THE eggplant °__°
You were right! Safari didn't recognize the stylesheet because it wasn't in .css
Can someone test it on Firefox? On my Mac i have only Safari and Opera!

(I link the demo site in the previous post)

Pages: 1 2

Trinit

Sukanjan.K

Trinit

Sukanjan.K

Trinit

Scoutie44

User 2877

Trinit

Scoutie44

Trinit