I recently made a new WordPress theme for a local travel company and they are now getting reports that two elements in my design are not in the correct positions in Firefox (seems specific to version 3.6) and Chrome for Mac.
A page where both issues are visible: http://www.totemtravel.com/blog
Issues:
The white flag with the logo on it at the top of every page jumps
several inches to the right to cover the area code of the first
phone number.
The search button at the bottom of the blog categories widget in the sidebar jumps to the right, out of the widget, and off the page content wrapper.
I think the issue has to do with where those browser assume the item should be before the relative positioning, but I need a way to make these all look the same across all modern-ish browsers.
I wont paste the pages of source code behind the theme since it can be easily viewed with Firebug or the Chrome inspector, but please let me know if any additional info would help.
1: The img for the white flag must have left:0. Not all browsers default to left 0. Firefox for example, is defaulted to left:50%. Another problem is your trying to relatively position a td element for the title "Totem Travel", this is invalid and I would recommend using divs here instead of tables.
2: This is due to the native CSS styling differences of the browsers. That is why people use CSS Reset style sheets, to zero everything out so you know for sure the "default" css is the same. Here's an example: http://meyerweb.com/eric/tools/css/reset/. The effect this is having on your css now is that, the submit button is falling down to under the input as it doesn't have enough space - so when you are relatively positioning it it is off in the browsers.
3: Relatively/absolutely positioning everything isn't quite the best way to go about styling a website. You will find many inconsistencies like you are experiencing and there are better ways. I would recommend visiting some example themes on sites such as themeforest.com or elegantthemes.com and seeing how they do their CSS and HTML
Related
so our site is built on a CMS and is using CMS driven background images on our banners, as such the banners has inline styles on the html element dictating what the background-image was. This all worked fine.
I made a change so that the css is in a style tag just before the element so there is no 'inline styles' on the pages.
This works fine on desktop, when resizing and using mobile browser simulators, but on 2 Android phones I've tested on some pages the banner image shows for a split second and then vanishes. The confusing thing is all the banners on the site use the same css and html, but only certain ones break.
The ones I know that break are on the 'Web Development' and 'Contact Us' pages.
This is not something I have seen happen before, and there is no difference between code on each page, no javascript touching these, and they worked before I made recent changes (of which the only bit effecting these was moving the style from inline into a style tag).
Working page:
https://www.pixelhero.co.uk/web-design-bristol/
Not working:
https://www.pixelhero.co.uk/about-us/
Does anyone have any ideas why this is happening? Or able to check if they see the same problem?
Image file sizes and dimensions don't seem to have any impact either (as often used to be the case)
I'm lost on this one, and can't seem to find an explanation for this use case.
Thanks all
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
Is it possible to print a HTML page with truly absolute positioned elements to paper? It seems all browsers are doing a big mess here. It is easy to define a body by absolute units (eg. cm) and place elements by position: absolute inside. However, every browser seem to try to make it impossible to print such a page. FF for example is adding print margins, even when printing to a PDF on linux despite 0-margin page settings. Chrome seems to shrink the page in every case.
So how to print something with absolute positioning, eg. paper form fields, markings etc.?
Have I overlooked something?
Sadly, the CSS3 Module: Paged Media allows all this to happen. This are the rules concerning pages which are too big:
3.3.3. Rendering page boxes that do not fit a page sheet
If a page box does not match the target page sheet dimensions, the user agent MAY choose (in order of preference) to:
Render the page box at the indicated size on a larger page sheet.
Rotate the page box 90° if this will make the page box fit the page sheet.
Scale the page box to fit the page sheet. (There is no requirement to maintain the aspect ratio of the page or of any elements on the page when scaling; however, preservation of the aspect ratio is preferred.) [done by Chrome]
Reformat the page contents, including 'spilling' onto other page sheets. [done by many other or older browsers]
Clip overflowed content (least preferred).
The user agent should consult the user before performing these operations.
3.3.4. Positioning the page box on the sheet
When the page box is smaller than the page size, the user agent should center the page box on the sheet since this will align double-sided pages and avoid accidental loss of information that is printed near the edge of the sheet.
And this is the rule which breaks all your positioned stuff:
3.7. Content outside the page box
[...] Also, when boxes are positioned absolutely, they MAY end up
in "inconvenient" locations. For example, images MAY be placed on the
edge of the page box. Similarly when boxes use fixed or relative
positioning, they MAY also end up outside of the page box.
A specification for the exact formatting of such elements lies outside
the scope of this document. However, we recommend that authors and
user agents observe the following general principles concerning
content outside the page box:
User agents SHOULD avoid generating a large number of empty page boxes to honor the positioning of elements (e.g., you don't want to
print 100 blank pages). Note, however, that generating a small number
of empty page boxes MAY be necessary to honor the 'left' and 'right'
values for 'page-break-before' and 'page-break-after'.
Authors SHOULD not position elements in inconvenient locations just to avoid rendering them. Instead:
To suppress box generation entirely, set the 'display' property to 'none'.
To make a box invisible, set the 'visibility' property.
User agents MAY handle boxes positioned outside the page box in several ways, including discarding them or creating page boxes for
them at the end of the document.
Have a look at the second paragraph of section 3.7: A specification for the exact formatting of such elements lies outside the scope of this document. Since there is no other document and no other guideline then the general principle following this paragraph, every browser can do whatever it want.
It's one of the flaws that are currently in this CSS3 module. However, I think those flaws cannot be removed by a CSS4 or revised CSS3 module, as the variety of possible stylesheets and resulting layouts is too huge too cover. Also note a little footnote given in CSS Print Profile:
‡ The printer MAY ignore positioned elements that are placed on the page before the position of the current element in the normal flow.
So it's basically not possible to create the same effect in every browser. As for the time being, the only possible way to achieve a portable document is to create a PDF with a third-party application or via a PDF printer and your most favorite browser. Every other way is bound to fail as long as either the W3C's recommendations aren't strict or the browser vendors implement whatever they want.
See also:
CSS3 Module: Paged Media (Working draft, last revision 2006)
CSS Print Profile (Working draft, last revision 2006)
Additional notes
If you have a bunch of position:absolute elements which need to be printed it's sometimes a good question whether an element actually needs to be positioned absolute, or if the same effect can be achieved in a slightly different or easier way. Also note that you should use display:none on each element that isn't truly needed for the printed media, such as ads, navigations, etc...
As you say, web browsers tend to do crazy things when printing. Print-oriented engines are often better.
WeasyPrint is an open-source engine that renders to PDF and supports absolute positioning as well as CSS 3 Paged Media to set the page margins:
#page { margin: 1cm /* or 0, if you want */ }
Make your container to have relative position. That's the only way to keep absolute positioned elements in the same place at every screen and paper. so if your main div (the div where all of your content is located) add following to your css:
#maindivname{position:relative;}
Should do the trick.
I have tested browser status for printing "position:absolute" elements with the following results:
IE 11: Fail. Doesn't matter what OS, 7,8,8.1.
IE 10: Pass. However, you cannot revert to 10 on 8.1 so folks with that are stuck.
Firefox up to 38.05 = Fail. Unknown if any version ever worked.
The good news is that it looks like the Blink/WebKit people did their homework instead of using poor code.
Chrome: Pass
Opera: Pass
Media Queries will do the trick -- check this link and previous question out, maybe it will help.
Suggestions for debugging print stylesheets?
Media Query transitioning px into inches/cm/whatever needed for printing requirements.
That border/margin you mentioned is probably your printer's printable area (the grip edge). Most printers need some type of edge to grab and feed the stock. That's why when one prints a full-bleed document (ink to the very edge), it's printed on stock larger than needed, then trimmed down.
set the margin with page setup is the first and primary solutions for printing the HTML page or a DIV .
After all not expected result will come then you need some digs on your HTML page.
Make a window without title bar or any custom bar using java script.And put all Original data into that window with a position:relative and also set the media type as print.
position:relative;
media:print;
Hope it will helpful.
Use in CSS this property:
body{
-webkit-print-color-adjust:exact;
}
This help positions absolutes and backgrounds in tables.
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.
I'm working on a web site which content and positioning of the elements loads from database, each element (text, form, images) loads inside a div with absolute positioning, using the top attribute of the div for vertical psition. it works fine most of the time and the elements render and look how they suppose to. How ever when i load large amount of text on a div element the space between the content and the div changes in different OS, or browser versions, im not sure which but i think its on different os because firefox 3.6.17 look different on windos xp and mac os.
Im pretty sure its because the fonts are reendered different in different browser which cause this inconsistence.
Problem comes when i want to show another element below the first content, the space between them changes heavily, causing that in some OS/Browser the second element looks way bellow the content, and so some people don´t look at this second element because they think the page is over.
However the div them self are well positioned
I was looking into Google WebFont Loader, but i think this solution only focus in the loading process of a font and uses Javascript to make them behave the same, but not look the same. It still needs some tests, but it occurred to me that the only way to fix this is with javascript, and i was wondering if some one have encounter a similar problem, or if you have a suggestion, cause it would be of great use for us! thank you!
One way to make to user see that there is more content would be to use tabbed browsing.