http://www.stringfieldassociates.com/
In Safari, all nav links that are horizontally aligned with the large central image are blocked and can't be clicked. It's like the image is taking up the width of the page, but it's not--it has a set width and height, and the only CSS applied to it is margin-top and a negative margin-right to position it. I had used positioning before but this bug cropped up in Firefox and IE. Using margins for positioning worked fine everywhere but Safari, apparently.
The image is inside the div that makes up the blue bar on the top. That bar is a div and it just has the menu as a list and then the image.
Any ideas? I almost never see Safari bugs that aren't also in Firefox, so I am stumped.
Jeremy
I would go with:
#header_img{
left: 50%;
margin-left:-230px;
position: absolute;
}
Try using an absolute position on that header image instead of a negative margin right.
Related
I have div with the id #sy-whatshelp for a floating chat head which has the property Position:fixed as I want it fixed on the bottom right corner of the viewport. The css for the div is
#sy-whatshelp {
right: 15px;
bottom: 15px;
position: fixed;
z-index: 9999;
}
The issue is that in chrome mobile browser when scrolling down very fast, the touch area of the div shifts up even though visually the div stays in the correct position as defined by my css. How do I make the touch area of the div stick to the correct place too as defined by my css.
Here is a video link of the problem in chrome mobile dubugger connected to a pc using adb. You can see that the highlighted portion identifying the div goes up while scrolling down but visually its in the correct place.
https://imgur.com/a/yJBUMdR
I have tried this solution with no avail
Position fixed on chrome mobile causing element to move on scroll up/down
http://jsfiddle.net/qJKKC/2/
I've got a nav peeking out from the right-hand side of the screen. As it does, I use an :after CSS generated element to darken the main content. In other browsers, this works fine, but in IE10 the generated element overlays the scrollbar. In the above fiddle, push the bottom of the window up until a scrollbar is present, then click on the text and you'll see what I mean.
I'm using the .window element to prevent horizontal scrolling to the nav.
How can I prevent this element overlaying the scrollbar, or otherwise achieve the same effect?
I can't see the problem as I don't have IE10 but as a guess you could try adding a high positive number to the z-index on the nav element:
.nav {
z-index:999;
}
I have a newsletter subscription box which looks like this:
The form takes the whole width of the parent, and so the button fills up all of the available width.
Using the before CSS clause, I'm drawing a small 'arrow' shape on top of the Subscribe button.
The problem is that the arrow is not properly centered, relative to the button. This can be demonstrated by reducing the viewport width. For example, here the problem can be seen:
The arrow is not properly centered horizontally, relative to the button.
How can I solve this alignment issue ?
JSFiddle: http://jsfiddle.net/ahmadka/7965p/
CodePen (JSFiddle is down sometimes): http://codepen.io/anon/pen/qFvbc
To center something that is positioned absolute, and of which you know the exact width, I always do the following:
left: 50%;
margin-left: -[halve the width of the element]px;
So your problem should be solved by adding magin-left: -12px; to your .form-wrapper button:before selector.
I am working on a responsive website using the Skeleton Grid and have a left floated navigation bar div that is 100% height of the browser window. It works in all browsers I've tested except for mobile safari on the iPad. In mobile safari the navigation div is 100% of the viewport, but when you scroll down on the page the div does not stretch to the bottom of the content. [See image below].
How do I make it so that the div is 100% height on the iPad, not just 100% of the viewport?
Dev Site: http://www.id8agency.com/jeremiah
Screenshot of the problem: http://www.id8agency.com/jeremiah/jeremiah.png (as you can see the white bar on the left does not stretch to the bottom of the page once you scroll)
How it should look: id8agency.com/jeremiah/jeremiah1.png (sorry, I don't have enough reputation to post more than 2 links)
Things I've tried:
Set height and min-height to 110% (works, but creates a scroll bar on
the desktop site)
Set height to height of content (works, but not all pages will be the
same length, so creates a scrollbar on some pages where content is
shorter)
Set position:absolute and and position bottom:0px (doesn't work,
positions the div at the bottom of the viewport, not the bottom of the page)
Set meta viewport tag to height=device-height and height=1000 (breaks
the responsive functionality of the website)
Thank you for any help you can provide!
try having the .navigation element be position: fixed; and then place the the content in the right in its own wrapper (something like .content-right).
Then set these properties on the .content-right element include a media query "reset" for when everything goes to one column (XXX is the breakpoint):
.content-right {
margin-left: 240px;
}
#media screen (max-width: XXX){
.content-right {
margin-left: auto;
}
}
Why don't you put on outer div and apply the background of the sidebar (sliced so it can be repeated on the y axis) to it and repeat-y?
It will expand up to the content end and when you don't need it anymore, you can remove the background from the media queries.
The problem also appears when I set my desktop browser viewport to a small height. I think the problem is, that all the 100%-heights here are relative to the viewport, and I think you want the navigation bar to be the height of the content, not the viewport.
But possible solutions would be to set a faux column on the #container-element (see http://alistapart.com/article/fauxcolumns).
Another possibility would be to measure the height of the #container-element with jquery and assign it to the navigation-bar. Something like:
var containerHeight = $('#container').height();
$('#navigation-container').css('height',containerHeight);
(I haven't checked if it works, but I think it should.)
I'm having trouble finding where I have the CSS wrong on this site. On Firefox, it's showing side scrolling to the right but on Chrome, it looks fine. I'm thinking overflow:hidden; but I can't seem to find where to put that.
Here's the site: http://www.llmedia.co/
Appreciate it!
The problem is in your footer. Your whole page width is 960px. But the footer ul width is 1100px. So in small screens your site will have a scroll bar to the right. Same result will happen in firefox browser too. So reduce the footer width to 960px and your scroll bar will disappear!
#footer ul { width: 960px; }
I see a scrollbar in Chrome so I'm guessing it has to do with your viewport size. Try shrinking your browser window in Chrome and see what happens. Be careful with using overflow:hidden;. You may be hiding content from users who don't have a large viewport for whatever reason.