Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-28-2012, 09:47 AM   PM User | #1
kylandrake
New to the CF scene

 
Join Date: Oct 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
kylandrake is an unknown quantity at this point
Need help with page CSS please help!

I can't seem to get this code right. My page is at

"http://www.roleplayer.me/view_profile.php?member_id=389947"

When I view my created page in Chrome browser everything looks Perfect and amazing just as I edited it. But when I view the very same page in IE, Firefox, and Opera browsers, the fonts are drastically larger in the Nav bar section where you see "Comment, Message, Blog, tattoo your pride, become a black dragon". The font in that section looks normal in Chrome browser, but it looks incredibly large in Firefox, Opera, and IE browsers. I can't seem to fix this, please help me. The code I am using is below:


[Css placed in About me Section is below]

Code:
<cite style="display:none">
AW Designs
</cite>

<style>
*{margin:0;padding:0}
body{background-color:000000}
.background{
background:url('http://i50.tinypic.com/e63nuv.jpg') no-repeat;
top:53px;
left:10px;
width:1024px;
height:768px;
position:absolute
}
.box1,.box2,.box3,.box4,.box5,.box6{
font:8pt Times New Roman;
color:a1a1a1;
line-height:20px
}
.box1{
top:310px;
left:860px;
position:absolute;
width:150px;
height:90px;
overflow:auto;
}
.box2{
top:245px;
left:360px;
position:absolute;
width:210px;
height:200px;
overflow:auto;
}
.box3{
top:220px;
left:810px;
position:absolute;
width:250px;
height:120px;
overflow:auto;
text-align:center;
background-color:#;
border:px 310000 solid;
color:a1a1a1
}
.box4{
top:597px;
left:125px;
position:absolute;
width:220px;
height:1px;
overflow:hidden;
text-align:center;
font:900 14pt Times,serif;
line-height:28pt;
}
.box5{
top:315px;
left:90px;
position:absolute;
width:690px;
height:20px;
}
.box5 ul{width:600px;left:50px;position:absolute}
.box5 li{margin:0 10px 0 0;list-style-type:none;}
.box5 li a:link,.box5 li a:hover,.box5 li a:active,.box5 li a:visited{
font-weight:900;
line-height:20pt;
font:300 8pt Helvetica;
color:a1a1a1;
}
.box5 li a:hover{
color:000000
}
.box6{
top:528px;
left:36px;
position:absolute;
width:150px;
height:90px;
overflow:auto;
}
body{scrollbar-arrow-color: CC0000; scrollbar-track-color:000000; scrollbar-highlight-color: ffffff; scrollbar-base-color: 000000; scrollbar-face-color: 000000; scrollbar-shadow-color: 000000; scrollbar-darkshadow-color: 000000;
}
a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:hover, a.navbar:active, a.navbar:visited{
color:CC0000;
text-decoration:none;
font:8pt Monotype Corsiva
}
a img{border:none}
.bodyContent div form{display:none}
.hold{background-color:transparent} 
.contain{left:50%;margin-left:-400px;top:130px;position:absolute;z-index:0;background-color:transparent;visibility:visible} 
.comments{display:none}
.contacttable,.profileinfo,.latestBlogEntry,.interestsAndDetails,.extendedNetwork,.orangetext15{display:none}
.bodyContent div div form{display:inline}
.bodyContent table table table{visibility:hidden}
td,form{margin:0;padding:0}
table,tr,td{background:transparent}
</style>
[CSS placed in the Like to Meet section is below]

Code:
<cite style="display:none">
AW Designs
</cite>

<div class="hold"><div class="contain">
<div class="background"></div>
<div class="box5">
<ul>
<li><a href="http://www.roleplayer.me/add_comment.php?member_id=389947" target="_blank">* Comment</a></li>
<li><a href="http://www.roleplayer.me/send_message.php?member_id=389947" target="_blank">* Message</a></li>
<li><a href="http://www.roleplayer.me/view_member_blog.php?member_id=389947" target="_blank">* Blog</a></li>
<li><a href="http://www.roleplayer.me/albums.php?member_id=389947" target="_blank">* Tattoo Your Pride (Pics)</a></li>
<li><a href="http://www.roleplayer.me/invite_friend.php?friend_id=389947" target="_blank">* Become a Black Dragon<br> (Add)</a></li>
<li></li>
</ul>
</div>

<div class="box1">



</div>
<div class="box2">




</div>

<div class="box3">

"Yea. Missin' me Already?" 
<br />
Name: Kano (??)<br />
Origin: Earthrealm<br />
Species: Human<br />
Affiliation: Black Dragon
<br /><br />
A portion of Kano's face is covered with a metal plate as a result of a disfiguring injury he sustained at the hands of Major Jackson Briggs. With the plated eye being a glowing red orb capable of emitting laser beams. 
<br /><br />
Originally a mercenary and leader of the international crime cartel known as the Black Dragon he rises beyond the level of mere brutality and aggression by also being sly and cunning. 
<br /><br />
Through his resourcefulness and ruthless ambition, he later ascended to position of general of Outworld's armies. Kano is a bit of a lone survivor, a crazed madman, and an intelligent commander in one package. His ruthless actions have made him the enemy of Lt. Sonya Blade.

<br /><br />
</div>
<div class="box4"><embed src="http://assets.mixpod.com/swf/mp3/mff-stick.swf?myid=89707062&path=2012/10/25" quality="high" wmode="transparent" flashvars="mycolor=111111&mycolor2=d40000&mycolor3=990303&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false" width="219" height="35" name="mixpod" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:219px;height:35px;" /><br /></a></div>
<div class="box6">



</div>
</div></div>
</div>
<div class="comments">
<table><tr><td>
<table><tr><td>

Last edited by VIPStephan; 10-28-2012 at 11:17 AM.. Reason: added code BB tags
kylandrake is offline   Reply With Quote
Old 10-28-2012, 11:18 AM   PM User | #2
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,699
Thanks: 5
Thanked 875 Times in 850 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 10-28-2012, 12:01 PM   PM User | #3
kylandrake
New to the CF scene

 
Join Date: Oct 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
kylandrake is an unknown quantity at this point
Understood, i'm sorry about that. I'm still learning all the proceedures and all.
kylandrake is offline   Reply With Quote
Old 10-28-2012, 02:21 PM   PM User | #4
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Hello kylandrake,
I don't have Opera to look at how you want your fonts. You have a !important font in your CSS that may be conflicting, not sure how but FF must view specificity different than Opera.

In your CSS you have
8pt Helvitica for .box5 li's
and
17px Century Gothic !important for all li's
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 11-01-2012, 08:22 AM   PM User | #5
kylandrake
New to the CF scene

 
Join Date: Oct 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
kylandrake is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
Hello kylandrake,
I don't have Opera to look at how you want your fonts. You have a !important font in your CSS that may be conflicting, not sure how but FF must view specificity different than Opera.

In your CSS you have
8pt Helvitica for .box5 li's
and
17px Century Gothic !important for all li's
Hi Excavator, i'm sorry for the late reply. I got hit with Hurricane Sandy. I do not have century gothic in my code. Or are you telling me to add century gothic to the code instead of helvitica? I do not understand? Could you let me know what you mean in baby terms as i'm not as honed as you guys with all of the terms and knowledge? My problem remained even if I change the font type, I cannot change the size of the fonts in the nav menu selection.
kylandrake is offline   Reply With Quote
Old 11-01-2012, 06:46 PM   PM User | #6
kylandrake
New to the CF scene

 
Join Date: Oct 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
kylandrake is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
Hello kylandrake,
I don't have Opera to look at how you want your fonts. You have a !important font in your CSS that may be conflicting, not sure how but FF must view specificity different than Opera.

In your CSS you have
8pt Helvitica for .box5 li's
and
17px Century Gothic !important for all li's

Excavator I think this fixed the problem "!important" i had to look over and figure out what was being said. I almost gave up but kept at it and noticed you meant "century gothic !important" to add to the code lol. So far it now shows up properly in all of the browsers! Thank you so much! You are amazing!
kylandrake is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:13 PM.


Advertisement
Log in to turn off these ads.