•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,548 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,917 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1767 | Replies: 2
•
•
Join Date: Jun 2005
Posts: 14
Reputation: 
Rep Power: 4
Solved Threads: 0
Newbie Poster
I'm currently working on the CSS template for a new client and running into a strange issue.
The design calls for a separation bar of repeated background to resemble a negative strip (site is a portfolio piece for a commercial photographer), and below that the continuation of a gradation.
For some reason, however, in Mozilla-based browsers a gap (visually as if it was a top margin) is appearing in the background repeat (gradation) in the pageblock.
To see it, visit http://www.spearsphotography.com/test_index.html in Firefox or another Moz browser.
The strange thing is... I noticed the contained news items were not being pushed down (that is to say, it wasn't a margin issue). I tried changing the CSS definition of the background image position on the div, etc. Finally to see exactly where the browser was drawing the div, I set a 1px green border on #pageblock. Oddly enough it fixed it! (weird, huh?) This is especially strange since the float: right; div with the splash image -is- affected by the mysterious "margin".
You can see that by going to http://www.spearsphotography.com/test_index2.html. (Contains an inline style to add the border to #pageblock
The css file is at http://www.spearsphotography.com/css/style.css
I just don't get it. This was all coming together so quickly from the Photoshop mockups, and now a brick wall that is driving me mad.
The design calls for a separation bar of repeated background to resemble a negative strip (site is a portfolio piece for a commercial photographer), and below that the continuation of a gradation.
For some reason, however, in Mozilla-based browsers a gap (visually as if it was a top margin) is appearing in the background repeat (gradation) in the pageblock.
To see it, visit http://www.spearsphotography.com/test_index.html in Firefox or another Moz browser.
The strange thing is... I noticed the contained news items were not being pushed down (that is to say, it wasn't a margin issue). I tried changing the CSS definition of the background image position on the div, etc. Finally to see exactly where the browser was drawing the div, I set a 1px green border on #pageblock. Oddly enough it fixed it! (weird, huh?) This is especially strange since the float: right; div with the splash image -is- affected by the mysterious "margin".
You can see that by going to http://www.spearsphotography.com/test_index2.html. (Contains an inline style to add the border to #pageblock
The css file is at http://www.spearsphotography.com/css/style.css
I just don't get it. This was all coming together so quickly from the Photoshop mockups, and now a brick wall that is driving me mad.
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Threaded Mode- Simple css templates (Site Layout and Usability)
- Css floating problem (HTML and CSS)
- CSS - Making div vertically "overflow" (HTML and CSS)
- Website Help (JavaScript / DHTML / AJAX)
- CSS hover on individual link (li) ??? (HTML and CSS)
- div comes vertical when i need it horizontal sideby side as columns (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Insert Data in to Db from the Dynamic Rows
- Next Thread: Display info from form in html
