SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS help for different browsers

    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

    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.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    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.



    .

  3. #3
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    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.



    .

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

    Now I've only two errors remaining.

    1. I've used a div element inline.
    2. 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

    How can I correct these issues now ?

  4. #4
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rustybuddy View Post
    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.

    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code:
    textarea.contact{width:420px}

    Code:
    height:25px;padding:5px;
    I don't see that display in my Safari (PC or mac). It looks much the same as Firefox.

  7. #7
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code:
    div.mainText {position:relative;min-height:0}
    div#backImage {
        background:url(http://maayazaal.dyndns.org/images/mail.png) no-repeat right top;
        overflow:hidden;
        width:256px;
        height:256px;
        position:absolute;
        right:0;top:0;
        z-index:3;
    }
    fieldset.contact input{position:relative;z-index:4}
    Code:
                <div id="main">
                    <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" />
                                <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 -->

  9. #9
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cools_sonu View Post
    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.
    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).

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by cools_sonu View Post

    But please help me figuring out, how to make the contact form's label element to align right to stick.
    If you want the label text aligned to the right you will need to provide a width for the float.

    e.g.

    Code:
    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;
    }
    
    You will need to clear each pair in the html using a break as IE won't start on a new line otherwise:

    Code:
    <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" />
                            <br />
                            <label for="email" class="contact"><span class="contact">Email:</span> </label>
                            <input type="text" class="contact" id="email" name="email" />
                            <br />
                            <label for="url" class="contact"><span class="contact">Your Webpage</span></label>
                            <input type="text" class="contact" id="url" name="url" />
                            <br />
                            <label for="subject" class="contact"><span class="contact">Subject</span></label>
                            <input type="text" class="contact" id="subject" name="subject" />
                            <br />
                            <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" />
                                 <br />                        
                          </fieldset>
                        </form>
                    </div>
                    <!-- End of mainText -->

  11. #11
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want the label text aligned to the right you will need to provide a width for the float.

    You will need to clear each pair in the html using a break as IE won't start on a new line otherwise:
    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.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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:

    http://www.webstandards.org/learn/tu.../intermediate/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •