Click here to get back home

CSS border missing in FireFox, ok in IE
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
CSS border missing in FireFox, ok in IE Cindy Parker 01-06-2008
Posted by Cindy Parker on January 6, 2008, 10:50 pm
Please log in for more thread options
 Hi, all. If anyone can help me with this I'd appreciate it. I am
essentially trying to float an image with a caption to the right
within some text. I've used a span tag in the html, then formatted
the span using css. In IE, the border properly appears around the
image and caption. In Firefox the entire border is not there. I've
tried messing with the padding and margins but nothing seems to make
that border show up in Firefox. The page can be seen at
http://www.pc-pals.net/lisa/home.html. The css is at
http://www.pc-pals.net/lisa/styles/main.css.

The code is a bit complex so I won't put the entire thing here, but
the html for this section is:

<p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<span id="main_image"><img src="images/annunciation.jpg" alt="The
painting &quot;Annunciation&quot; by John Collier" width="400"
height="402" align="top" />
<br />
<b><em>Annunciation</em> by John Collier<br /><br />
http://www.hillstream.com/annunciation.html</b>
</span>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum</p>

The css for the span is:

#main_image {
        float: right;
        width: 400px;
        margin:5px 0 5px 5px;
        padding: 10px 10px 0 10px;
        border-style: solid;
        background-color: #FFFFFF;
        border: 5px;
        border-color: #660000;
        }

If anyone has any suggestions, or a better way to do this, please let
me know. I'm trying to keep it semi-flexible because the text will
change and the image might. Thank you for your help.

- Cindy

Posted by GTalbot on January 12, 2008, 5:49 pm
Please log in for more thread options

> In IE, the border properly appears around the
> image and caption. In Firefox the entire border is not there.


> http://www.pc-pals.net/lisa/home.html
> http://www.pc-pals.net/lisa/styles/main.css


> #main_image {
> float: right;
> width: 400px;
> margin:5px 0 5px 5px;
> padding: 10px 10px 0 10px;
> border-style: solid;
> background-color: #FFFFFF;
> border: 5px;
> border-color: #660000;
> }
>
> If anyone has any suggestions, or a better way to do this,

Cindy,

One easy way was to just rewrite border: 5px; into border-width: 5px


I read the whole tread. I want you to understand that what Firefox
does is *not* a bug. What Internet Explorer 7 does is a bug, is an
incorrect implementation of the border shorthand property.

Testcase and demos:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/BorderColorBugIE7.html

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/BorderColorBugIE7_2.html=


Current draft version of the CSS 2.1 Test suite (testing border
shorthand syntax)
http://www.w3.org/Style/CSS/Test/CSS2.1/current/html4/t010403-shand-border-0=
0-c.htm

Regards, G=E9rard
--
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Similar ThreadsPosted
Border missing in Firefox but not IE6 December 22, 2004, 12:26 pm
Missing entitites - Invalid or not well-formed ? October 15, 2004, 3:15 am
Fundamental problem with HTML, or am I missing something? January 24, 2005, 8:29 pm
Missing valid-html401 icon March 11, 2005, 7:27 pm
Vertical scroll bar with missing bottom arrow? July 22, 2004, 8:04 pm
Some page titles missing in WebTrends report? October 8, 2004, 12:35 pm
W3C markup validator and missing table tags December 6, 2005, 4:20 pm
World's Longest URL (domain name) .... missing from http://www.guinnessworldrecords.com/content_pages/search.asp 'domain name' July 16, 2006, 12:18 pm
Table border (outside only) August 6, 2004, 8:16 am
Help pls, mystery border February 12, 2005, 12:06 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap