I am working on a WordPress theme using the WordPress Boilerplate as a base (HTML5 Boilerplate + another WordPress base theme). Can be seen here:
JaredSartin.com (Theme is in progress, don't mind some of the other mess :P)
It looks just fine in Chrome, but the top image gets messed up in all other browsers. I am layering 2 images to overlap so I can have a responsive design, removing the back image and leaving just the title when the browser gets to a certain width.
The images are absolutely positioned with a percentage margin-top and margin-left on the top one to properly position it. they are both set to scale with the page via
height:auto;
width:100%;
OR
width:85%;
in the top image's case. Now, I was working in Chrome to produce the current look, the left-margin is fine in all browsers I have tested (FF and IE7/IE8 on Windows) but the top is off. In FF's inspector, I see that the adjusted top-margin needs to be 7.5% (makes more sense than the one I set in chrome - 24.5%).
Any ideas to a cross browser fix? I don't want to have to use specific browser detection (like Chrome vs Other). I already have some reset styles in place.
EDIT
I have a fix/hack, but if you have a better one (not so hacky, but just plain Cross Browser CSS), let me know...
header img#titleimgfront{
width: 85%;
margin-top: 7.5%; /* For non-webkit browsers */
margin-left: 8.5%;
}
/* unfortunate hack since Webkit has an issue with Margin-top */
#media screen and (-webkit-min-device-pixel-ratio:0) {
header img#titleimgfront{
margin-top: 24.6%;
}
}
There's nothing wrong with what you're doing -- this is a bug in Webkit, that it calculates a percentage margin-top from the height of an absolutely-positioned element, where other browsers (and the spec) calculate it from the width. (see: https://lists.webkit.org/pipermail/webkit-unassigned/2011-February/293573.html)
It does seem counter-intuitive to base margin-top and margin-bottom values on the element's width, but that's the way it is.
But you've found an effective workaround, so you're sorted. Don't feel that your layout is causing this problem, because it isn't, it's just Webkit.
Place this code at the top of your style.css right below the theme information and it should solve the majority of cross browser issues:
/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
Your using absolute positioning lose the margins and use top, right, bottom or left.
header img#titleimgfront{
top: 25%;
}
While this is not the answer to your question just advice.
Your overly complicating a simple header image. I don't get the point of overlapping and lining up 3 images.
Just use 1 transparent png and in your WordPress header.php
<header>
<img src="http://path_to_image.png" width="800" height="240" class="logo" />
</header>
css:
.logo {
margin: 20% auto;
}
If your going to use HTML 5 drop all the extra divs and stuff. You don't need body or the extra wrapper.
Just use <section <?php body_class(); ?>> instead.
add top_margin class to fix top margin problem
$('.top_margin').each(function () {
var $item = $(this),
marginTop = 0,
newMarginTop = 0,
pageWidth = $item.parent().innerWidth();
//hide to obtain percentage value instead of calculated px value
$item.hide();
marginTop = parseFloat($item.css('margin-top')) / 100;
newMarginTop = Math.round(self.pageWidth * marginTop) + 'px';
$item.css('margin-top', newMarginTop);
console.log('old: ' + marginTop + ', new: ' + newMarginTop);
$item.show();
});
Related
I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library.
In desktop I had to change some animations because they increased the width the page, with a horizontal scrolling.
For the mobile I have the same issues, but now I don't understand if the problem is caused from the animations or something else, I see the navbar larger.
Here is the link: https://doc.digitalsolutioner.com/
I've tried to fix wider elements like the navbar, but the issue remains.
I have seen in other issues similar about rows without containers, but it's not the case.
I want to have the right width on the mobile, with no horizontal scrolling.
the culprit is the following class inside the footer... to check: go to the bottom of the page; do inspect element; remove this property (in browser developer tools) to see how it is causing the horizontal scroll to appear
[data-aos^=fade][data-aos^=fade].aos-animate
{ transform: translateZ(0); }
simplest way to solve this will be to hide overflow-x property against your body. This css will be the simplest way to get the fade effect without seeing the scroll at the bottom:
body {
overflow-x: hidden;
}
Update:
on mobiles and mobile emulators, a horizontal bar appears... this was due to margins on the card-service class, just remove the margin-left and margin-right properties in the media-query (as shown below) to resolve this.
#media (max-width: 576px){
.card-service {
/* margin-left: 15px; */
/* margin-right: 15px; */
margin-bottom: 25px !important;
}
}
In AOS there is problem, when you cant set initial position of your element, Its set to the default position.
Like in fade-left default position is right: 0 so whenever you call fade-left its start from 0 and its create screen overflow.
So there is two option here,
Don't use fade-left
Set initial value of the element
I'm having a problem with a fixed position element in mobile Chrome. A little gap between the fixed top element and top of the viewport appears when I swipe up and down without reloading the page.
To replicate this bug the easiest way is to try the bootstrap example https://getbootstrap.com/examples/navbar-fixed-top/ in mobile Chrome. Swipe up and down without reloading page and after few tries you should see a gap.
The most common answer on Chrome rendering issue. Fixed position anchor with UL in body does not work for me:
#element {
-webkit-transform: translateZ(0);
}
Check if your body and html do not have any margin or padding. Also inspect to check if any of the div have any negative margin or paddings
body, html { margin: 0; padding: 0 };
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
Try setting margin-top and padding-top to 0px for the fixed element and the body and html tags
You have margins set on your div#navbar ul.nav.navbar-nav --- set your margin to 0.
see if setting your margin and padding are set to auto, in this case, the margin should automatically adjust accordingly.
body, HTML
{
margin:auto;
padding:auto;
}
I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:
img {
max-width: 100%;
width: auto;
height: auto;
}
As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%; Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.
Anyway, I got things to work by overriding the image width a Firefox specific directive like this:
/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
#-moz-document url-prefix() {
img {
width: 100%;
}
}
I don't think I should have to do this, and googling doesn't seem to come across this issue.
This is the default CSS that is used for responsive Images:
img {
max-width: 100%;
height: auto;
width:100%;
}
And this is the indispensable Javascript: Bongard.net
Thanks to David Bongard for the Javascript.
Now add the following to the "if safari" rule of the Script:
for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].style.width = "auto";
}
Safari wants width:auto; the rest of the browsers i tested are happy with width:100%;
This works for me
#-moz-document url-prefix() {
img{
width: 100%;
max-width: 100%;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
img{
max-width: 100%;
}
}
I have similar problem, and found out setting max-width on the wrapper element kinda solves the issue. (Only tested with Firefox 23, but it should works with earlier Firefox too.) See also these JSFiddle:
http://jsfiddle.net/CLUGX/ (demonstrate the issue on Firefox)
http://jsfiddle.net/CLUGX/1/ (uses max-width on wrapper to fix the issue)
http://jsfiddle.net/CLUGX/4/ (demonstrate that responsive sizing works, try resizing inner frame)
Before max-width:
After max-width:
One thing to note, however, if you happens to set padding on wrapper element, it won't be taken into img's width calculation and will cause inconsistent results between Firefox and Safari (http://jsfiddle.net/CLUGX/3/):
Chances are your image is inside a shrink-wrapping container, which then has to compute it's width based on the width of the image. And then the max-width of the image is 100% of the container's width.
If that's what's going on, the CSS spec doesn't actually define the behavior of such markup, where the parent's width depends on the child and the child's width depends on the parent.
See https://bugzilla.mozilla.org/show_bug.cgi?id=823483 for some discussion on the issue.
If you use the width for image in px or gave padding or used display:table instead of display:block for the image, then image responsiveness will not work properly on some/all browsers
Well after trying all sorts of codes and fidles, this simple edition on my css did the trick for me:
img {width: 100%;}
Simply then where you wish your images to resize, define them without adding the "width" parameter (sizing to original from source); and then if you do wish to fix their size, simply add the "width" parameter on SRC style (regular width="" definition won't work). If it's an inline image on your paragraph, simply wrap it in a div and align that div to whatever side you'd like. Reeeeally simple!
It works both for Google, Firefox and IE. Cheers!
I have just had this problem and found a solution: When I set the img max-width in my CSS sheet, nothing happens - the image won't scale. When I set max-width in the page itself - where the image is called, it works in all browsers and on all devices.
No:
img {
max-width: 100%;
height: auto; }
Yes:
<img src ="image.jpg" style="max-width:100%; height:auto;">
If anyone can shed some light of wisdom on this, please do.
I used Kridsada Thanabulpong's jsfiddle but only got it to work when I removed display:table from the div wrapping my image.
Isolated test case (view in IE 7 or IE 8/9 in IE 7 mode)
Viewing this page in IE 7 is causing my width value to be ignored. If you remove the padding value, the width is properly applied, but when you add in the padding, it causes the entire page to grow, and it treats the padding almost as margin. The larger the width of the page, the larger the blank area to the right of the element. I've been unable to find which bug this is, and, more importantly, how to fix it. Has anyone seen this and does anyone know a solution?
Things I've tried so far:
zoom fix
display: inline-block (recommended for double vertical padding issue)
It isn't line-height (it's a width issue...)
Screenshot of the issue:
This div should span the entire width of the page, and no more, but you'll notice the scrollbar here:
And the result of scrolling to the right:
This should not be there.
Examining the element in the browser tools shows the width to be incorrectly the full width of the page, instead of the full width minus the padding.
Disclaimer: I'll ignore the functional requirement and your comments on the other answers and just concentrate on the concrete problem.
This IE7 specific problem is caused by using an offset (e.g. top, right, bottom or left) on a relatively positioned element. If you offsets a relatively positioned element, then it will basically still retain the whole space of its original position. Note that this doesn't happen when offsetting absolutely positioned element.
Before the left offset is been applied, the relatively positioned element is due to its width and and the right padding completely out of the viewport and hence a horizontal scollbar will be generated. After the left offset is applied on the relatively positioned element, you're basically leaving a space of the same size as the offset on the other side of the offset, still outside the viewport.
A bit sane webbrowser will during redrawing however discover that there's nothing visible outside the viewport and hence hide the scrollbar again. IE7, however, isn't that smart enough and retains the scrollbar.
After all, using left offset was technically been the wrong solution. You should in first place have used margin-left instead of left. Unlike the offset, the margin doesn't leave an empty space on the original position, but really pushes the whole element to the desired position.
So, here's how your script is been fixed:
$('#el').css({
'width': document.body.scrollWidth - 200,
'padding-right': 200,
'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});
By the way, I wonder how that float: left; makes sense in this construct wherein you apparently want to simulate a 100% width. It'll probably be for other purposes not visible in the concrete example.
You can solve this without using javascript for calculating width, and no padding, instead use position: absolute. Here's an updated fiddle. It will work in any browser
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left:0;
right: 0;
top: 0;
}
http://jsfiddle.net/LRpHq/7/
I was having this problem with a skeleton.css implementation. Specifically, my #header was taking the width of body, which took the width of html. The remaining content had a set-width of 978px. So when the window was smaller than 978, the background of the header would only render to the width of the viewport. i.e. - if you started the render at 500 wide, that's all the wider #header would get. Dragging a wider width of the viewport had no problems, but right scroll cut the header to the size of initial viewport.
My fix: html,body { min-width:978px } /* your width may vary */
Since you seem to be fine with using Javascript, adjust your resize() function:
function resize () {
$('#el').css({'width':$(window).width(),'position':'absolute','left':'0px'});
}
Fixed the original post as it was off by miles.
edit:
Tested in a sandboxed IE7 and it works. (what can i say, i go out of my way to get something perfect, also am new around here so that bounty would really help to be very honest) to also note that it works natively in IE7, IE8 and IE9, FF3.6, Opera 10 and should work in Safari with no problem, Chrome didn't get mentioned as it's my default browser and it works, no doubt about it.
Here is the JS:
function resize () {
$('#el').trigger('resize').width('100%');
}
resize();
and the CSS:
#container {
width: 320px;
border: 1px solid #000000;
min-height: 500px;
margin: 0px auto;
}
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left: 0;
}
i found solution for similar problem here. see if it can helps you too.
i have a div on a web page that basically acts as a panel container. i want it to:
have a minimum width of 1000px; So no matter how small the content inside the div is, it will at least keep the panel to 1000px in width:
in terms of max width, it should keep going as big as the content within it. So if a person has a 24 inch monitor and they want to maximize the browser it should keep growing until the content inside doesn't have any scroll bars and then stop.
needs to work in all browsers.
how would i do this in css?
Assuming this item is a block element (i.e. "display: block"), it should scale automatically as wide as its containing element (in this case the browser window).
In CSS, just specify "min-width: 1000px." This will work in IE8+ and all modern browsers.
try this
#panel {
min-width: 1000px;
diplay: block;
overflow: hidden; }
Try this:
#panel
{
/* Other styles */
min-width:1000px;
/*width:100%; - removed as it will create horizontal scrollbar if margin and padding aren't 0 as per Josh's comment.*/
}
However, you will problems with older browsers like IE6 which do not like the min-width thingy in which case you will need to use JavaScript.