CSS help for different browsers

cools_sonu · April 2, 2010, 10:29am

Hello.

I’m developing a site, But when I’m viewing that on different browser, then all are showing it strangely different.

MSIE is making all the fonts larger while safari making them smaller.

How can I override the default styling of safari ? I’ve used the reset css too. Still of no use.

While chorme is showing my markup nearly good. and some what firefox too. But MSIE is strangely showing differntly. and Safari is making it look aweful:sick:

Please help me regarding that.

Here is the link of that page which I’m trying to develop

Page which I’m developing now

And in screenshots I’ve defined the problems clearly.
Safari’s Problem:

Link:Safari 1

Safari 2

MSIE8
MSIE 8

Firefox Screenshot
Firefox Link

Chrome’s Screenshot
Chrome Link

Chrome is showing nearly neat. But some places are there which I’m unable to make it correct, like making the text aling to right side and vertically upward.

Please help me.

In that page. I actually want to make that bird’s feather to overflow over the border of that form, and move the message box downward the label of message.

And in safari 1 screenshot. I want to make it look like others. I mean to say to make fix the position of those date and time in the exact location.

John_Betong · April 2, 2010, 11:02am

I validated your webpage and found 14 errors and 2 warnings.

Your website is “optimised” for a particular browser and it does what you want it to do. The other browsers encounter the errors and warnings and have to try and guess what you want it to do which no doubt accounts for some of the visual discrepancies.

https://addons.mozilla.org/en-US/firefox/addon/249

Try installing the above Firefox addon, remove the errors and warnings and then make adjustments as and where required.

.

cools_sonu · April 2, 2010, 12:54pm

Thanx. Now I’ve tried to remove the errors.

Now I’ve only two errors remaining.

I’ve used a div element inline.
The facebook link. on the footer bar.

Rest all are now being corrected. And I’ve validated the css too and it is ok.

But still I’m not able to achieve what I ought to be.

Safari and MSIE are still nerdy to me:mad::sick:

How can I correct these issues now ?

rustybuddy · April 2, 2010, 12:59pm

On elements where you need your text to show up at a certain size (in relation to design) like on your little dome thingly with ‘31’ on it. Use px as your unit of measure rather than em or %.

disclaimer: I haven’t looked at your site other than your screenshots so my guidance is based off of them.

cools_sonu · April 2, 2010, 1:16pm

hmmm I’m using a mix of em and px.

Actually my targeted users have old age computers maximum running xp and Pentium 4 versions of pc with screen resoultion of 800X600 normally.

So If I use px based layout, then probably some of my text would be seem too large. And i.e. a dilemma for me.

PaulOB · April 2, 2010, 1:53pm

Hi,

The height of the go button is 35px but you have made the input 25px + .35em padding. That will always get rounded differently. Use 5px padding and it will always be 35px.

Set the width of your textarea and don’t rely on cols.


textarea.contact{width:420px}


height:25px;padding:5px;

http://picasaweb.google.com/lh/photo/lp7Z-f2ltcH_GG_9Ig6JOg?feat=directlink

I don’t see that display in my Safari (PC or mac). It looks much the same as Firefox.

cools_sonu · April 2, 2010, 2:21pm

Thanx Paul.

Now One thing I’ve got clear, that either use em or px means any single measurement, then only it will fetch result.

Safari is making the text small, so that is why size of ‘M’ is smaller and henceforth the sizes of all my text are becoming smaller and this is the reason, why I’m not getting the same result in Safari.

Well I’m now converting all the em’s into px.

But please help me figuring out, how to make the contact form’s label element to align right to stick.

And also how to make the text-area move downward the the label element.

And is it possible to make the border of the form to hide behind the bird’s feather ?

PaulOB · April 2, 2010, 2:57pm

One thing at a time

And is it possible to make the border of the form to hide behind the bird’s feather ?

The bird is on the background of the parent The border is on the child. You can’t make the childs border go behind the background of the parent. It’s impossible to do that.

You would need to place the bird in its own element and absolutely position it.

e.g.


[B]div.mainText {position:relative;min-height:0}[/B]
div#backImage {
    background:url(http://maayazaal.dyndns.org/images/mail.png) no-repeat right top;
    overflow:hidden;
 [B]   width:256px;
    height:256px;
 [/B][B]   position:absolute;
    right:0;top:0;
    z-index:3;[/B]
}
[B]fieldset.contact input{position:relative;z-index:4}[/B]


            <div id="main">
                <div  class="mainText">
                [B]    <div id="backImage"></div>
                    <!-- End of backImage -->[/B]
                        <form action="" method="post" class="contact">
                            <fieldset class="contact">
                            <legend class="contact">Contact Me</legend>
                            <label for="name" class="contact"><span class="contact">Name:</span> </label>
                            <input type="text" class="contact" id="contactname" name="name" />
                            <label for="email" class="contact"><span class="contact">Email:</span> </label>
                            <input type="text" class="contact" id="email" name="email" />
                            <label for="url" class="contact"><span class="contact">Your Webpage</span></label>
                            <input type="text" class="contact" id="url" name="url" />
                            <label for="subject" class="contact"><span class="contact">Subject</span></label>
                            <input type="text" class="contact" id="subject" name="subject" />
                            <label for="comment" class="contact" id="message"><span class="contact">Message:</span> <br />
                            <br />
                            </label>
                            <textarea name="comment" class="contact" id="comment" rows="12" cols="50"></textarea>
                            <input type="submit" name="submit" value="Send!" class="contact" id="submit" />
                            </fieldset>
                        </form>
            
                </div>
                <!-- End of mainText -->
            </div>
            <!-- End of main -->

rustybuddy · April 2, 2010, 3:07pm

I believe you misunderstood me, completely.

I was not saying to use px for the ENTIRE design, but just in certain situations where you need the text to be a certain size in relation to ‘something’ in your case the image of the dome thingy (ie, in your little dome thingy).

PaulOB · April 2, 2010, 3:09pm

If you want the label text aligned to the right you will need to provide a width for the float.

e.g.


[B]label.contact span.contact {
    text-align:right;
    width:140px;
    margin:12px 0 0;
    padding:0 5px 0 0
}
label#message span.contact {
    text-align:right;
    width:auto;
    margin:0
}
fieldset.contact br {
    width:100&#37;;
    clear:both;
    margin:0;
    font-size:0;
}
[/B]

You will need to clear each pair in the html using a break as IE won’t start on a new line otherwise:


<div  class="mainText">
                    <div id="backImage"></div>
                    <!-- End of backImage -->
                    <form action="" method="post" class="contact">
                        <fieldset class="contact">
                        <legend class="contact">Contact Me</legend>
                        <label for="name" class="contact"><span class="contact">Name:</span> </label>
                        <input type="text" class="contact" id="contactname" name="name" />
                     [B]   <br />[/B]
                        <label for="email" class="contact"><span class="contact">Email:</span> </label>
                        <input type="text" class="contact" id="email" name="email" />
                    [B]    <br />[/B]
                        <label for="url" class="contact"><span class="contact">Your Webpage</span></label>
                        <input type="text" class="contact" id="url" name="url" />
                      [B]  <br />[/B]
                        <label for="subject" class="contact"><span class="contact">Subject</span></label>
                        <input type="text" class="contact" id="subject" name="subject" />
                     [B]   <br />[/B]
                        <label for="comment" class="contact" id="message"><span class="contact">Message:</span></label>
                        <textarea name="comment" class="contact" id="comment" rows="12" cols="50"></textarea>
                        <input type="submit" name="submit" value="Send!" class="contact" id="submit" />[B]
                             <br />[/B]                        
                      </fieldset>
                    </form>
                </div>
                <!-- End of mainText -->

cools_sonu · April 3, 2010, 12:26pm

Thanx Paul.

Now my contact page is working. The way u instructed was really rocking. I learnt a lot from that. I tested full day today as it is saturday so got leave. hence got full time to test the code.

Now I’ve made some changes into that. I’ve made divided my contact form into two fieldsets. So, want to know is it ok or we can’t use fieldset in this way ?

While there is one more problem occurred with my footer. I think I should take that problem into relevant thread which I made earlier.

Please help me regarding that problem.

PaulOB · April 3, 2010, 1:40pm

Yes it’s ok to have nested fieldsets as long as they make sense.

You should provide legends for each fieldset so that they are identified even if you hide the text off screen.

See here: