...

View Full Version : Opera,IE7 menu problems heading tags and position



iv4o
11-18-2009, 05:02 PM
Hi all,
Congratulation for the grate forum, this is my first topic.

I trying to put in my gallery left menu but having some problems with IE7 and Opera browsers.

Problem with IE7 is with the background color (should be transparent) but appear blue and the menu text is centered, must be possition left.

With Opera the problem is silimar, the text is centered.
This is my style.css file and theme.php if somebody want to help me

style.css




/* Colors used: */
/* --------------------------------------------*/
/* Hex 000000 = RGB 0, 0, 0 = black */
/* Hex 5F5F5F = RGB 95, 95, 95 = light black */
/* Hex BDBEBD = RGB 189,190,189 = dark grey */
/* Hex D1D7DC = RGB 209,215,220 = medium grey */
/* Hex CCD7E0 = RGB 204,215,224 = light grey */
/* Hex CBD7DE = RGB 203,215,222 = steel grey */
/* Hex F2F5F7 = RGB 242,245,247 = dark white */
/* Hex EFEFEF = RGB 239,239,239 = dark white */
/* Hex FFFFFF = RGB 255,255,255 = white */
/* Hex 000666 = RGB 0, 6,102 = dark blue */
/* Hex 0033CC = RBG 0, 91,104 = medium blue */
/* Hex 718EA5 = RGB 113,142,165 = light blue */
/* Hex 8AA5B5 = RGB 138,165,181 = light blue */
/* if you don't like a color, just do a search */
/* and replace on the hex color... */

body {
background: url("images/bg.gif");
background-color: #F2F5F7;
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size : 12px;
color: #000666;
margin: 0px;
}

table {
font-size : 12px;
}

h1{
font-weight: normal;
font-size: 21px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
line-height : 80%;
color: #FFFFFF;
background: #718EA5;
margin: 1px;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
background-image : url(images/box_left_icon.gif);
background-repeat : no-repeat;
background-position : left;
padding-left : 18px;
font-size: 18px;
margin: 0px;
}

h3 {
font-weight: normal;
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
margin: 2px;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 2px 0px;
}

ul {
margin-left: 5px;
padding: 0px;
}

li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
list-style-type: disc;
}

.textinput {
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size: 100%;
border: 1px solid #D1D7DC;
padding-right: 3px;
padding-left: 3px;
}

.listbox {
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size: 100%;
border: 1px solid #D1D7DC;
vertical-align : middle;
}

.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #CCD7E0;
background-image : url(images/button_bg.gif);
background-position : bottom;
}

.comment_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #CCD7E0;
background-image : url(images/button_bg.gif);
background-position : bottom;
padding-left: 3px;
padding-right: 3px;
}

.radio {
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size: 100%;
vertical-align : middle;
}

.checkbox {
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size: 100%;
vertical-align : middle;
}

a {
color: #0033CC;
text-decoration: none;
}

a:hover {
color: #0033CC;
text-decoration: underline;
}

.bblink a {
color: #0033CC;
text-decoration: none;
}

.bblink a:hover {
color: #0033CC;
text-decoration: underline;
}

.maintable {
border: 1px solid #CCD7E0;
background-color: #FFFFFF;
margin-top: 1px;
margin-bottom: 1px;
}

.tableh1 {
font-family: Verdana, Geneva, Arial, sans-serif;
background : #8AA5B5 ;
color: #FFFFFF;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableh1_compact {
font-family: Verdana, Geneva, Arial, sans-serif;
background : #8AA5B5 ;
color: #FFFFFF;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tableh2 {
background: #CBD7DE ;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableh2_compact {
background: #CBD7DE ;
color : #000000;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tableb {
background: #F2F5F7 ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableb_compact {
background: #F2F5F7 ;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tablef {
background: #CBD7DE ;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.catrow_noalb {
background: #CBD7DE ;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.catrow {
background: #F2F5F7 ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.album_stat {
font-size : 85%;
margin: 5px 0px;
}

.thumb_filename {
font-size: 80%;
display: block;
}

.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}

.thumb_caption {
font-size: 80%;
padding: 1px;
display : block;
}

.thumb_caption a {
text-decoration: underline;
color: #000000;
}


.thumb_num_comments {
font-weight: normal;
font-size: 85%;
padding: 2px;
font-style : italic;
display : block;
}

.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}

.user_thumb_infobox th {
font-weight : bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox td {
font-size: 85%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox a {
text-decoration: none;
color: #000000;
}

.user_thumb_infobox a:hover {
color: #000000;
text-decoration: underline;
}

.sortorder_cell {
background : #8AA5B5 ;
color: #FFFFFF;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 20px;
margin: 0px;
}

.sortorder_options {
font-family: Verdana, Arial, Helvetica, sans-serif;
background : #8AA5B5 ;
color: #FFFFFF;
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 80%;
white-space: nowrap;
}

.navmenu {
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
color: #FFFFFF;
font-weight: bold;
background : #8AA5B5 ;
border-style: none;
}

.navmenu img {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
}

.navmenu a {
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #FFFFFF;
}

.navmenu a:hover {
background : #F2F5F7 ;
text-decoration: none;
color: #000000;
}

.admin_menu_thumb {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
border: 1px solid #CCD7E0;
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}

.admin_menu_thumb a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}


.admin_menu_thumb a:hover {
color: #000000;
text-decoration: underline;
}

.admin_menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
border: 1px solid #CCD7E0;
background-image : url(images/button_bg.gif);
background-position : bottom;
background-repeat: repeat-x;
background-color: #FFFFFF;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}

.admin_menu a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}

.admin_menu a:hover {
color: #000000;
text-decoration: underline;
}

td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}

.comment_date{
color : #5F5F5F;
font-size: 90%;
vertical-align : middle;
}

.image {
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}

.imageborder {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 30px;
margin-bottom: 30px;
}

.display_media {
background: #F2F5F7 ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.thumbnails {
background: #F2F5F7 ;
padding: 5px;
}

.footer {
font-size : 9px;
}

.footer a {
text-decoration: none;
color: #000000;
}

.footer a:hover {
color: #000000;
text-decoration: underline;
}

.statlink {
color: #FFFFFF;
}

.statlink a {
text-decoration: none;
color: #FFFFFF;
}

.statlink a:hover {
color: #FFFFFF;
text-decoration: underline;
}

.alblink a {
text-decoration: underline;
color: #000000;
}

.alblink a:hover {
color: #000000;
text-decoration: underline;
}

.catlink {
display: block;
margin-bottom: 2px;
}

.catlink a {
text-decoration: underline;
color: #000000;
}

.catlink a:hover {
color: #000000;
text-decoration: underline;
}

.topmenu {
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
line-height : 130%;
font-size : 110%;
}

.topmenu a {
color : #0033CC;
text-decoration : none;
}

.topmenu a:hover {
color : #0033CC;
text-decoration : underline;
}

.img_caption_table {
border: none;
background-color: #FFFFFF;
width : 100%;
margin : 0px;
}

.img_caption_table th {
background: #D1D7DC ;
font-size : 100%;
color : #000000;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
background: #F2F5F7 ;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
white-space: normal;
}

.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width : 100%;
margin : 0px;
}

.clickable_option {
cursor : default;

}

.listbox_lang {
color: #000666;
background-color: #F2F5F7;
border: 1px solid #F2F5F7;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align : middle;
}

#vanity a {
display:block;
width:57px;
height:20px;
margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}

and this is the theme.php


define('THEME_IS_XHTML10_TRANSITIONAL',1); // Remove this if you edit this template until
// you have validated it. See docs/theme.htm.


// HTML template for main menu
$template_sys_menu = <<<EOT

<div class="wireframemenu">

<h1 style="text-align:center"><p>Navigation<hr /></p></h1>

<!-- BEGIN home -->
<p><a href="{HOME_TGT}" title="{HOME_TITLE}"> {HOME_LNK}</a></p>
<!-- END home -->

<!-- BEGIN my_gallery -->
<p><a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}"> {MY_GAL_LNK}</a></p>
<!-- END my_gallery -->

<!-- BEGIN allow_memberlist -->
<p><a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}"> {MEMBERLIST_LNK}</a></p>
<!-- END allow_memberlist -->

<!-- BEGIN my_profile -->
<p><a href="{MY_PROF_TGT}"> {MY_PROF_LNK}</a></p>
<!-- END my_profile -->

<!-- BEGIN faq -->
<p><a href="{FAQ_TGT}" title="{FAQ_TITLE}"> {FAQ_LNK}</a></p>
<!-- END faq -->

<!-- BEGIN enter_admin_mode -->
<p><a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}"> {ADM_MODE_LNK}</a></p>
<!-- END enter_admin_mode -->

<!-- BEGIN leave_admin_mode -->
<p><a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}"> {USR_MODE_LNK}</a></p>
<!-- END leave_admin_mode -->

<!-- BEGIN upload_pic -->
<p><a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}"> {UPL_PIC_LNK}</a></p>
<!-- END upload_pic -->

<!-- BEGIN register -->
<p><a href="{REGISTER_TGT}" title="{REGISTER_TITLE}"> {REGISTER_LNK}</a></p>
<!-- END register -->

<!-- BEGIN login -->
<p><a href="{LOGIN_TGT}" title=""> {LOGIN_LNK}</a></p>
<!-- END login -->

<!-- BEGIN logout -->
<p><a href="{LOGOUT_TGT}" title=""> {LOGOUT_LNK}</a></p>
<!-- END logout -->
</div>
EOT;

// HTML template for sub_menu
$template_sub_menu = <<<EOT

<div class="wireframemenu">
<!-- BEGIN custom_link -->
<p><a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}"> {CUSTOM_LNK_LNK}</a></p>
<!-- END custom_link -->

<p><a href="location_map.php"> Посетени страни</a></p>

<!-- BEGIN album_list -->
<p><a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}"> {ALB_LIST_LNK}</a></p>
<!-- END album_list -->
<p><a href="{LASTUP_TGT}"> {LASTUP_LNK}</a></p>
<p><a href="{LASTCOM_TGT}"> {LASTCOM_LNK}</a></p>
<p><a href="{TOPN_TGT}"> {TOPN_LNK}</a></p>
<p><a href="{TOPRATED_TGT}"> {TOPRATED_LNK}</a></p>
<p><a href="{FAV_TGT}"> {FAV_LNK}</a></p>
<p><a href="{SEARCH_TGT}"> {SEARCH_LNK}</a></p>
</div>
<hr />
<div class="wireframemenu">
<h1 style="text-align:center"><p>Friends<hr /></p></h1>
<p><a href="http://www.avatar-bg.org">www.avatar-bg.org</a></p>
<p><a href="http://www.party-bg.net/">www.party-bg.net</a></p>
<p><a href="http://www.w3schools.com/"><img src="http://www.w3schools.com/images/w3schools88x31.gif" border="0" alt="" /></a></p>
<p><a href="http://www.htmldog.com/"><img src="http://www.htmldog.com/badge3.gif" width="88" height="31" border="0" alt="HTML and CSS tutorials, references, and articles" /></a></p>
</div>
EOT;
?>

i can pass the css validation without any errors, here is my css validation. (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fabroadbg.com%2F)

Here is link to my site :
http://www.abroadbg.com

(Sorry for my bad english)

abduraooft
11-19-2009, 08:03 AM
i can pass the css validation without any errors, here is my css validation. But there are soem errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.abroadbg.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Fix them too.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum