Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Border not showing in Opera, FF or Safari, but does in IE

    Hi,

    I am currently working on a small website. My problem is that the left and right borders are not showing up. They always have on all other CSS sites I have done in firefox and opera and safari, but not this one, it only shows up in IE.

    The link is: http://www.mpagbyorksregion.co.uk/to...ms/index2.html

    The CSS is within the html document.

    Any ideas?

    P.S. Also the text isnt conforming to its margined div, and should not go to the edges for now, but those edges are the ones that need the border.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You need to look into semantic coding. You're not closing your img tags properly, and you should be using the <p> tag rather than <span> to wrap your paragraph, as that's what it is. This is the reason your text isn't applying to the margins you've set.

    Try
    Code:
    .content {
    border-right: #CBCBCB 1px solid;
    border-left: #CBCBCB 1px solid;
    width:380px;
    }
    Also you can simplify your margin settings in one simple line... for example:

    Code:
    .container {
    margin: 100px 200px 50px 200px;
    width:382px;
    }
    does exactly the same as your four lines. The numbers respectively apply to the top, right, bottom then left margins.

    EDIT: You don't even have a doctype declaration! I suggest you look up using doctypes so that your page does not render in quirks mode in IE and you will find it easier to code cross browser!
    Last edited by ahallicks; 07-13-2007 at 12:17 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok thanks ahallicks,

    I've just always defined the margins seperately because I forget which order they go in lol.

    Also, what do you mean I am not closing my img tags properly? Don't you close them within the same tag i.e.

    Code:
    <img src='' />
    Also I will change those other things.

    Thanks.

    EDIT: Ah the old doctype dec, I forgot I am using an older version of Dreamweaver today that doesn't do it for you...grr.

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    lol, well... get it in there then!

    What I meant was you weren't actually closing your image tags with /> and you haven't declared an alt for them either, which will be needed when you do put in your doctype
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I still can't see where I haven't closed them properly and I will get round to the alt, it isn't the most important thing at the moment.

    I got a problem now though. Because the text ('lorem ipsum...') is now in a p tag with the textcontent class, it is making a new line under it, as <p> has always done, which is shifting down the footer and bottom rounded corner parts so that the image of the flower has a gap in it. Is there any way to stop <p> creating a new line?

    Thanks.

    EDIT: Also, The linkscontainer div, that is supposed to have a left margin so that the links aren't flush with the border (home, services and contact), isn't working. It is in IE but not safari.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    In your CSS change .textcontent to p.textcontent and add padding: 0; Or you could use the Universal Selector to zero out all margins and padding, which may benefit you later on too. Then you add the margins and padding when you need them?

    Use:

    Code:
    .linkscontainer {
    margin: 10px 0px 40px 25px;
    width:253px;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The padding thing didn't work on the p.textcontent, so I tried using the class with a div tag, and that worked, the padding now works properly.

    I realised why my .linkscontainer class wasn't working, it was because I had scripted it as:

    Code:
    ... padding-left:25px width:253px;}
    With no semi-colon after the padding-left property, that now also works.

    Thanks for the help, but the border still doesn't work .

  • #8
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Hmmm.... the border works in my FF? Try TAKING OUT THE COMMAS and SPELLING SOLID CORRECTLY.

    My first post showed these two changes and it looks to me as though you haven't actually implemented them. Do so and everything should be fine.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #9
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It seems to be working pretty much now, thanks. The only problem is the fact that the content class seems to be going 1px wider than the header and the footer containing the rounded corners. Also, the popup box is in the wrong place.


    Here is a link:

    http://www.mpagbyorksregion.co.uk/to...ms/index2.html

  • #10
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Change the width of .content to 380px, seems to work well enough for me.
    You might want to consider adding img {border: none;} to your CSS somewhere.
    Try moving that quickcontent div around... for example, try putting it after the .linkcontainer div in the HTML and then positioning it from there.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #11
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok it is all done now, (was completed a few weeks back) but just got round to this forum, hope ya like it:

    www.blooms-florist.co.uk


  •  

    Posting Permissions

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