We have been having some difficulty with div’s that are butted up next to one another and have a continuing background image. The idea is to have one continuous image across each of the div’s. The center div has an image that is tiling so it will expand as the div is resized during design of the page, i.e. changing it’s pixel height in the inspector. The issue arises when the page is zoomed in or out in the browser. Have read several articles regarding “Reset CSS” and such in an effort to keep all div’s glued together with each at its fixed size. Not able to resolve the issue.
Is there any content within these butted DIVs? That’s probably where
the extra space is coming from, since unless you have done a complete
structural reset and used one consistent measurement scheme for all
elements and all dimensional attributes of all elements, you probably
have some non-proportional scaling happening somewhere.
Fixing this is going to take some detective work with the Web
Inspector in Safari, looking at all the elements in the affected area,
and zeroing in on the child elements like Hn tags and P tags to see if
any of them have some stray padding or margin set in a non-pixel
measurement.
Walter
On Apr 12, 2011, at 11:27 PM, TeamSDA wrote:
We have been having some difficulty with div’s that are butted up
next to one another and have a continuing background image. The idea
is to have one continuous image across each of the div’s. The center
div has an image that is tiling so it will expand as the div is
resized during design of the page, i.e. changing it’s pixel height
in the inspector. The issue arises when the page is zoomed in or out
in the browser. Have read several articles regarding “Reset CSS” and
such in an effort to keep all div’s glued together with each at its
fixed size. Not able to resolve the issue.
the point I personal struggle with is, that I can read your words but don’t have any imagination on how the game should go.
You’re talking about Divs? So far so good: It is inline content (BoxModel either full or partial) but if you use divs already that should do the job slight easy for you, I do not see the problem.
It’s to me the swiss army knife keeping design and construction concerning the unexpected height during construction and later browser view.
Teaching you this (if even necessary) is not that easy by adding a few notes here.
If you could share me an image or example that points your thoughts more imaginable for me, I’m sure to point you through this - but without I’m lost.
Thank you for your input. No we are not using box model nor are we using RPL. We are applying FW HTML Items to the page with absolute positioning, which I believe are div’s. Hope I have this right and have not confused the issue. This issue becomes even more obvious when viewed in safari for iOS devices as it automatically scales the web page to fit.
We will upload an example of the issue to a testing location shortly.
We used the most basic blank document provided by freeway, not our standard starter document that we preload with styles and such. The page only has three parts all of which pull away from each other as the page is zoomed. I have named the parts Top, Middle and Bottom.
Walt, I have been looking through the test page using Safaris Web Inspector. Have noticed that freeway is applying percentages to the page div and the individual div background’s. Could this be the cause and if so how would I go about adjusting these parameters in freeway?
No, the issue varies slightly but is apparent on most browsers. we will soak test on Firefox, IE and Chrome. Our testing environment is set up for current browsers and two full versions back.
do not have unfortunately anything to say to the main problem and how to solve it.
There are many reasons to use bg images cause this opens you something like layer feeling if you use .png to get nearby photoshop circumstances (except IE6). My entire page-head is done by div in div using bg and stack one “over” in fact in the other.
Just did a quick test with full inline (I know - the hate one) and I’m not really surprised to get the expected result (robbing your images).
Hi Dave, We use a lot of background images to construct an overall look and feel for a page. Sometimes we will have a header and footer div with images that sandwich a third div running the height of the page. This div may have a background image that is tiling. So to answer your question, yes we may have content in these div’s, the example was for the purpose of demonstrating the issue only.
Thomas, Your example seems to be to be solid. Am I to understand you are doing this via box model? Was trying to avoid that type of architecture as it complicates things like headers and footers. Also not as free of a building method. We have also tried the align top center and bottom approach. Can get the top seem to pull together but the bottom pulls apart. With the middle part being centered we then get a gap both top and bottom.
I would call this simple “Inline-Content”, cause Box-Model is to my personal understanding a bit more complex cause it sets the entire environment into realtions.
It’s very easy to achieve but yes - it depends on how you need to work further and if it matches your desires.
What would be the further steps and why should this small construction hamper your following page construction?
The biggest reason for not building our pages this way is, to the best of my knowledge, it breaks the master page concept. We rely on the master page to simplify how we manage header and footer content.
I have another idea that would be a slight blend of the two… place all div’s that need to hold their alignment in a wrapper div and place the wrapper on the page using absolute positioning. Again my biggest issue when I have gone down this type of road was that I loose the ability to have my header and footer be managed through a master page. But, in the past the objective was to have a layout that was elastic from a horizontal perspective.
Use RPL and the page and remove elements that don’t work with this action. This tends to be the simplest as freeway does all the heavy lifting by turning all the div’s into inline content which as we know fixes the gap issue.
Make a wrapper and place the three elements as inline content inside of it. For all other page elements just take care to not make any of them child items of the wrapper parts. and this seems to keep the master page relationship in tact.