Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Rounded Box Not Displaying in Firefox 1

Status
Not open for further replies.
Kalisto

Kalisto

Programmer
Feb 18, 2003
997
GB
I have a basic page, as per the following.

The box appears as I'd expect in I.E. of all things, but in firefox, the bottom graphic doesnt appear. (the rounded corners and the bottom of the box)

Any ideas or pointers here? Cheers

K

[source]
<body>
<div class="contentSection ">
<div class="contentArea"><p>Some Content Here</p></div>
<div class="footer"><p>Some Content Here</p></div>
</div>
<div class="last" />
</body>
[/source]

and the css is as follows;
[source]
/* Basic Page Description
-----------------------------------------------------------------------------------*/
body {
background-color: #FFFFF0;
margin: 0;
padding: 0;
}

/* Positional Elements
-----------------------------------------------------------------------------------*/
/* Positions the Outer Frame, with teh shadows etc */
.contentSection {
margin: 0px auto;
border: none;
padding: 0;
width: 750px;
padding: 15px;
text-align: left;
background: url(../img/tiledBorder.JPG) repeat-y;
}

.last {
margin: 0px auto;
border: none;
background: url(../img/curvedBase.JPG) no-repeat left bottom;
width: 750px;
padding-left: 30px;
/* To get to work in firefox need padding-bottom: 20px; but then I get
a gap in I.E*/
}
[/source]


 
Sort by date Sort by votes
Upvote 0 Downvote
W3C said:
C.3. Element Minimization and Empty Element Content

Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).
Click to expand...
According to W3C, the [tt]<div class="last" />[/tt] is illegal syntax. FF, being a strict(er) browser ignores the illegal element while IE still renders it. Have you tried using the normal syntax for an empty div?
Code: 
<div class="last"></div>
 
Upvote 0 Downvote
Thanks, but that doesn't help.

I guess I need to go back to the start, and build my box up using an example from above, and then compare that with my code, see whats different.

Cheers

K
 
Upvote 0 Downvote
Can you give us an online example of this? Failing that, maybe you could post all the code (or make a simple test harness if there's too much code). The only other thing that would make FF not render a box would be a floating/clearing problem, but that doesn't seem to be the case here.
 
Upvote 0 Downvote
ok, u can see what its doing at


Apologies for the dodgy art, I didnt email the artwork home with me so Ive had to knock some up in paint

As it stands, after playing about with it, I can now get the bottom border drawn , its just offset, and I can't bring it back no matter what I do.

Whats weird is on my home PC (IIS) I can see the bottom border, the copy Ive uploaded, the bottom border doesn't appear.

One of those days :-/

K
 
Upvote 0 Downvote
According to the scarce code you posted earlier, this copy you have on the server is different -- .last div is inside content section whereas in the initial code it was outsite. The background image does not appear because the url is incorrect -- it is looking for 'curvedBase.JPG' where the real file is called 'curvedbase.JPG'. As a *nix server, it clearly distinguishes between caps and no caps. When fixing the URL, the graphic appeared but yes, it was offset because it was inside the content section (which has 15px padding applied on each side).
 
Upvote 0 Downvote
Thanks. I had been playing about with the code which is why it was different to the original code.

It still doesnt look like I want, but I suspect that that is down to my lack of understanding on css and how it is applied, so I'll go and do some research.

Thanks

K
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
784
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
731
PeDa
PeDa
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
228
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top