LinuxQuestions.org
Latest LQ Deal: Latest LQ Deals
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 04-26-2004, 10:42 AM   #1
jpbarto
Senior Member
 
Registered: Mar 2003
Location: Pittsburgh, PA
Distribution: Gentoo / NetBSD
Posts: 1,251

Rep: Reputation: 45
CSS / HTML in Mozilla


I know this may be a little off the beaten path of questions normally posted in this forum. But I'm hoping that someone may still be able to lend a hand.

I have an HTML page that I've been developing and its layout is controlled by CSS. I had it all beautifully laid out in Mozilla and was working the CSS to get it to look nice in both Moz and IE. When I added a style element of
border: 1px solid black

however, a DIV in Moz jumped from its position up about 40 pixels. And the text contained in the DIV stayed in its original position. Can anyone help to tell me what this may say about my CSS? Why would the addition of a border cause a DIV to be moved in such a way?

Thanks,
jpbarto
 
Old 04-26-2004, 02:14 PM   #2
david_ross
Moderator
 
Registered: Mar 2003
Location: Scotland
Distribution: Slackware, RedHat, Debian
Posts: 12,047

Rep: Reputation: 67
It seems odd and I have never seen it before. What version of Mozilla are you using?

Any chance of seeing an example piece of code.
 
Old 04-26-2004, 03:59 PM   #3
jpbarto
Senior Member
 
Registered: Mar 2003
Location: Pittsburgh, PA
Distribution: Gentoo / NetBSD
Posts: 1,251

Original Poster
Rep: Reputation: 45
The Mozilla version is 1.5.

And for the following HTML:
<div id="content">
&nbsp;&nbsp;<div id="contentheader">
&nbsp;&nbsp;&nbsp;&nbsp;News
&nbsp;&nbsp;</div>
&nbsp;&nbsp;<div class="content-item">
&nbsp;&nbsp;...
&nbsp;&nbsp;</div>
</div>

With the following CSS:
#contentheader {
&nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contentheader-bg.gif) no-repeat top left;
&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 35px;
&nbsp;&nbsp;&nbsp;&nbsp;height: 36px;
&nbsp;&nbsp;&nbsp;&nbsp;width: 560px;
&nbsp;&nbsp;&nbsp;&nbsp;}

the text displays beautifully and just where it should in relation to the DIV background.

However with the following CSS:
#contentheader {
&nbsp;&nbsp;&nbsp;&nbsp;background: url(images/contentheader-bg.gif) no-repeat top left;
&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 35px;
&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid black;
&nbsp;&nbsp;&nbsp;&nbsp;height: 36px;
&nbsp;&nbsp;&nbsp;&nbsp;width: 560px;
&nbsp;&nbsp;&nbsp;&nbsp;}

it just goes nuts with the background 40 pixels above the text and the text outside of the border (outside of the DIV??). It just seems really odd that the addition of a border would cause location changes. I hate to say it but perhaps a coding bug in Mozilla? (I haven't checked the site in Firefox, Galeon, etc to see if this error occurs elsewhere, only Mozilla and IE).

Thanks for the interest in this problem,
jpbarto

Last edited by jpbarto; 04-26-2004 at 04:02 PM.
 
Old 04-26-2004, 04:09 PM   #4
david_ross
Moderator
 
Registered: Mar 2003
Location: Scotland
Distribution: Slackware, RedHat, Debian
Posts: 12,047

Rep: Reputation: 67
Well I can't see anything odd when I test it in Mozilla 1.6 - the only thing I can spot about your code is that the id is "content-header" and in css you specify "contentheader".
 
Old 04-26-2004, 09:08 PM   #5
jpbarto
Senior Member
 
Registered: Mar 2003
Location: Pittsburgh, PA
Distribution: Gentoo / NetBSD
Posts: 1,251

Original Poster
Rep: Reputation: 45
yeah, that's a typo from entering it into the site. Perhaps once the site has been released I'll post up the URL so that perhaps people could download the full html or css and give me a better idea of what is wrong with it.

Thanks for your help David.

jpbarto
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
A little HTML/CSS help? jon_k General 9 07-17-2005 02:49 AM
html/css retrodict Programming 5 11-01-2004 07:56 PM
html/css hylke Programming 0 06-27-2004 03:39 PM
html/css problemo tearinox Programming 4 01-26-2004 03:45 PM
Positioning with CSS in HTML PhilD Programming 7 08-26-2003 11:49 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 09:00 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration