[SOLVED] explorer v/s firefox :S

[ilikephp]

hello,

 

I am facing a problem in I Explorer and in firefox,

I am using styles,

and in internet explorer everything is fine but in firefox, the shape of the text change?

Can uhelp plz?

the pictures are attached.

 

Thankyou

 

[attachment deleted by admin]

[AndyB]

OK, that illustrates the problem nicely ... but we can't help fix your CSS unless we see your CSS (and maybe the relevant section of html as well).  Post what we need between CODE tags, please.

[ilikephp]

the yellow color in the picure is selected in red:

the css style:

 

.meniuri {

font-family: tahoma;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #FFB400;

text-decoration: none;

}

.meniurimici {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-style: normal;

font-weight: normal;

color: #000000;

text-decoration: none;

}

.copyright {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

font-weight: normal;

color: #FFFFFF;

text-decoration: none;

}

 

 

.text {

font-family: Tahoma;

font-size: 11px;

font-style: normal;

font-weight: normal;

color: #555555;

text-decoration: none;

line-height: 20px;

}

.subsubtitlu {

font-family: Tahoma;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #555555;

text-decoration: none;

}

.subtitlu {

font-family: Tahoma;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #ABB2CF;

text-decoration: none;

line-height:20px;

}

.text1 {

font-family: Tahoma;

font-size: 12px;

font-style: normal;

font-weight: normal;

color: #FFC600;

text-decoration: none;

line-height:25px;

}

.rearmore {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #841414;

text-decoration: none;

}

.readmore1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #FFFFFF;

text-decoration: none;

}

.subtitlu1 {

font-family: "Arial Narrow";

font-size: 15px;

font-style: normal;

font-weight: normal;

color: #024E90;

text-decoration: none;

}

.textcasuta {

font-family: Tahoma;

font-size: 11px;

line-height: normal;

font-weight: normal;

color: #FFFFFF;

text-decoration: none;

}

 

[947740]

Try specifying text-align.

[ilikephp]

I tried it, but the same problem still happen only in firefox.

 

the html code:

 

html code:

 

<table width="313" height="252" border="1" align="right" cellpadding="0" cellspacing="0">

                                <tr valign="bottom">

                                  <td height="252" align="right" valign="top">

  <p dir="rtl">مَن تَلَقَّى  وَصايايَ وحَفِظَها فذاكَ الَّذي يُحِبُّني والَّذي يُحِبُّني يُحِبُّه أَبي وأَنا  أَيضاً أُحِبُّه فأُظهِرُ لَهُ نَفْسي)). قالَ له يَهوذا، غَيرُ  الإِسخَريوطيّ: ((يا ربّ، ما الأَمرُ حتَّى إِنَّكَ  تُظِهرُ نَفْسَكَ لَنا ولا تُظهِرُها لِلعالَم؟))أَجابَه يسوع: (( إذا أَحَبَّني أَحَد حَفِظَ  كلامي فأحَبَّه أَبي ونأتي إِلَيه فنَجعَلُ لَنا عِندَه مُقاماً. ومَن لا  يُحِبُّني لا يَحفَظُ كَلامي. والكَلِمَةُ الَّتي تَسمَعونَها لَيسَت كَلِمَتي بل  كَلِمَةُ الآبِ الَّذي أَرسَلَني. قُلتُ لَكُم هذه الأَشياءَ وأَنا مُقيمٌ عِندكم  ولكِنَّ المُؤَيِّد، الرُّوحَ القُدُس الَّذي يُرسِلُه الآبُ بِاسمي هو  يُعَلِّمُكم جَميعَ الأشياء ويُذَكِّرُكُم جَميعَ ما قُلتُه لَكم. السَّلامَ  أَستَودِعُكُم وسَلامي أُعْطيكم. لا أُعْطي أَنا كما يُعْطي العالَم. فلا  تَضْطَرِبْ قُلوبُكم ولا تَفْزَعْ.</td>

                                </tr>

                              </table>

[947740]

Where are you defining the class name?

 

Try:

 

<td height="252" align="right" valign="top" class="text1">

 

You will probably need to define the text-align value, too, once you do that ^.

[ilikephp]

Sorry, this was the real one:

 

<table width="316" height="252" border="1" align="right" cellpadding="0" cellspacing="0">

                                <tr valign="bottom">

                                  <td width="312" height="252" align="right" valign="top" class="text1">

 

 

Same error, I receive a gap (empty) before the first line in firefox

[ilikephp]

Can u plz try it and tell me if u have the same problem?

 

Thanks

[next]

Woooooow, it's not FF, it's IE who has it wrong. Look at your line-height property, 25px? That's way too much.

[soycharliente]

It's not a "problem" per say. Browsers render HTML differently. Text will look different from browser to browser. Not every browser is built the same way. Obviously they follow some of the same rules and guidelines, but each browser is unique. You could code for individual browsers, but that could be messy and I don't recommend it.

[ilikephp]

the line height this way is very normal coz the font is in Arabic,

when I create a new table to try a small example, it works well.

why I have the identation before the first line?

 

I tried many websites in IE and in FF, they all work well :S

[LemonInflux]

...Is this PHP help?

[TheFilmGod]

The <p> tag is creating the problem.

 

To fix the problem, use the universal reset in your css. Add this to your master CSS for the whole website.

 

* {margin: 0;padding:0}

 

What does it do?

 

-> It resets all margin and padding to 0 for all elements, including <p> in question. The 2 renderings differ since FF puts in a default margin (top) for <p>, but IE does not.

 

Note: I do not know if this is the solution/problem but it def. seems like it. Its also good practice to use the universal reset. It makes things more consistent for all browsers.

[ilikephp]

hello,

 

Yeh it works,

but I noticed a new problem,

The main page is not in the center anymore, it is aligned to the left,

How can I change it back to the center, and in my css file can I use this code in each type or it should be put before the css files?

 

Thx

[haku]

Remember what someone said about not being able to help if we can't see your code...?

[ilikephp]

* {margin: 0;padding:0

}

.meniuri {

font-family: tahoma;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #FFB400;

text-decoration: none;

}

.meniurimici {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-style: normal;

font-weight: normal;

color: #000000;

text-decoration: none;

}

.copyright {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

font-weight: normal;

color: #FFFFFF;

text-decoration: none;

}

 

 

.text {

font-family: Tahoma;

font-size: 11px;

font-style: normal;

font-weight: normal;

color: #555555;

text-decoration: none;

}

.subsubtitlu {

font-family: Tahoma;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #555555;

text-decoration: none;

}

.subtitlu {

font-family: Tahoma;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #ABB2CF;

text-decoration: none;

}

.text1 {

font-family: Tahoma;

font-size: 11px;

font-style: normal;

font-weight: normal;

color: #FFC600;

text-decoration: none;

}

.rearmore {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #841414;

text-decoration: none;

}

.readmore1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

font-weight: bold;

color: #FFFFFF;

text-decoration: none;

}

.subtitlu1 {

font-family: "Arial Narrow";

font-size: 15px;

font-style: normal;

font-weight: normal;

color: #024E90;

text-decoration: none;

}

.textcasuta {

font-family: Tahoma;

font-size: 11px;

line-height: normal;

font-weight: normal;

color: #FFFFFF;

text-decoration: none;

}

 

[TheFilmGod]

Alright then, replace this:

 

* { margin: 0; padding: 0; }

 

With:

 

p {
margin: 0;
padding: 0;
}

 

I consider this as a "band-aid" solution, but it'll get the job done.

[haku]

*
{
   margin: 0;
   padding: 0;
}

 

This is bad practice (which is why the film god said to take it away). It's one of those things that looks good at first, but ends up causing troubles later on, as it screws up form elements.

 

download a 'css reset sheet', that is much better.

[soycharliente]

This is bad practice (which is why the film god said to take it away). It's one of those things that looks good at first, but ends up causing troubles later on, as it screws up form elements.

 

I don't necessarily think that it's a huge problem. If you're going to use a style sheet anyways, why not reset everything and then position elements how you want? What does "it screw up form elements" mean exactly? It doesn't come with default padding and margins? Oh no! I get to move it where I want! (which I most likely would have done anyway.)

[soycharliente]

@ilikephp: That is a bit of code that is HIGHLY repetitive. IMO, there's no need to have

font-size: 11px;
font-style: normal;
font-weight: normal
text-decoration: none;

over and over and over again. I usually make a size/font/weight/color/etc declaration in the body tag or wrapper id tag and change when it needs to be changed. Have some defaults declared.

 

If you do something like this, you'll have the same effect. Also, look into combining definitions when possible. Look at the singular FONT property.

* { margin: 0; padding:0; }
body {
/* general rule of thumb, but there are more
font: style variant weight size family */
font: normal normal normal 11px Tahoma;
text-decoration: none;
}
.meniuri {
color: #FFB400;
font-weight: bold;
}
.meniurimici {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.text {
color: #555555;
}
.subsubtitlu {
color: #555555;
font-weight: bold;
}
.subtitlu {
color: #ABB2CF;
font-weight: bold;
}
.text1 {
color: #FFC600;
}
.rearmore {
color: #841414;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.readmore1 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.subtitlu1 {
color: #024E90;
font-family: "Arial Narrow";
font-size: 15px;
}
.textcasuta {
color: #FFFFFF;
}

That's ~50 lines compared to your ~100 lines. Half as much data to send. I'm not trying to fix the problem of your browser differences, just trying to enlighten you to ways in which repeated code can be eliminated and avoided.

 

[haku]

I don't necessarily think that it's a huge problem. If you're going to use a style sheet anyways, why not reset everything and then position elements how you want? What does "it screw up form elements" mean exactly? It doesn't come with default padding and margins? Oh no! I get to move it where I want! (which I most likely would have done anyway.)

 

I'll tell you what. Next time you use that, and then are having troubles with your forms being screwed up, you come back and tell us yourself.

[soycharliente]

Let's not start a flame. I'll drop out here instead of listing 10 sites.

[TheFilmGod]

I don't necessarily think that it's a huge problem. If you're going to use a style sheet anyways, why not reset everything and then position elements how you want? What does "it screw up form elements" mean exactly? It doesn't come with default padding and margins? Oh no! I get to move it where I want! (which I most likely would have done anyway.)

 

I'll tell you what. Next time you use that, and then are having troubles with your forms being screwed up, you come back and tell us yourself.

 

That's exactly what Eric Meyer would say! 

 

Yesterday, I actually implemented the universal reset, and it had little effect on my form elements. When I say "little" I don't mean "no change," but nominal change. This is because my form elements where fully styled - even the submit buttons had custom backgrounds and everything.

 

What should I do? Should I keep the universal selector or use a real "Reset Stylesheet?"

[ilikephp]

Thank you all

The problem is fixed (Y)

 

the p was creating the problem, I replaced it in the css with:

p {

margin: 0;

padding: 0;

}