View Full Version : Border not showing in Opera, FF or Safari, but does in IE

07-13-2007, 11:52 AM

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/tomsmith/Blooms/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.

07-13-2007, 12:06 PM
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.


.content {
border-right: #CBCBCB 1px solid;
border-left: #CBCBCB 1px solid;

Also you can simplify your margin settings in one simple line... for example:

.container {
margin: 100px 200px 50px 200px;

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!

07-13-2007, 02:43 PM
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.

<img src='' />

Also I will change those other things.


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.

07-13-2007, 02:45 PM
lol, well... get it in there then! :p

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

07-13-2007, 02:56 PM
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?


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.

07-13-2007, 03:03 PM
In your CSS change .textcontent to p.textcontent and add padding: 0; Or you could use the Universal Selector (http://www.ahallicks.co.uk/universal_selector.php) 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?


.linkscontainer {
margin: 10px 0px 40px 25px;

07-13-2007, 03:38 PM
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:

... 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 :(.

07-13-2007, 05:29 PM
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.

07-15-2007, 12:48 PM
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:


07-16-2007, 10:21 AM
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.

08-08-2007, 09:02 PM
Ok it is all done now, (was completed a few weeks back) but just got round to this forum, hope ya like it: