The search section in my site www.anahatainternational.org displays correctly across FF, Chrome, and Safari. But in Safari mobile it displays in the middle of the page.
#search_section {
position: absolute;
right: 490px;
top: 10px;
z-index: 5;
}
Thanks.
I would suggest making few changes to the layout of the page so that you could make the #search_section relative to the header.
I have create a skeletal structure for it. http://jsfiddle.net/AACuy/
Also remove the left, top and position:absolute properties.
There are too many classes in the site for me to make changes using firebug and show the result.
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
on my website https://koengeter-immobilien.de i have a centered logo with a shrinked header. I centered the logo with the css command
.html_header_top.html_logo_center .logo {
transform: translate(-63%, -2%); }
It works fine in Google Chome and IE. But in firefox the logo is above the menu when the the website is scrolled.
I cant find a solution for firefox.
Can somebody help?
best regards
The div menu must be positioned absolute:
#header_main_alternate {
z-index: 2;
position: absolute;
width: 100%;
}
If you inspect the code you can see the 2 divs stay one over the other.
the site I am working on has a number of different overlays which are controlled by CSS as follow (with different properties for each but same way):
.box_4, .box_5, .box_6 {
position: fixed;
top: -1900px;
left: 50%;
z-index: 101;
width: 883px;
margin-left: -400px;
}
These properties get applied when I close the overlay.
However on the iPad something strange happens, when I scroll the site just to check it out some of the overlays appear and disappear as soon as I touch the screen again.
Could that be due to the css?
There are many issues with mobile devices and position:fixed;
Instead of positioning them outside the viewport, you better hide/show the boxes.
Some references:
http://www.8164.org/designing-for-the-ipad/
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
http://blog.mspace.fm/2009/10/01/iphone-mobile-safari-css-position-fixed/
I am working on a site and I have to align the bottom of the right box (Affiliation) with the bottom of the right box (Contact Us).
The problem is, I can make it work in Chrome, IE and Mozilla and even Safari on Windows, but NOT when it is Safari on Mac. I don't have Mac but I am using Adobe BrowserLab to see how it is (and the client says it doesn't work :P)
I've tried several codes / CSS including #media but still no luck (if you see the code / layout is changing then it may be me working on it).
Both the markup and CSS is simple and standard one, just need help to make it work in major browsers, Chrome, Firefox, (modern)IE, and Safari on Mac.
Current code:
#bottom-aff{
display:inline;
height: 145px !important;
}
but as I said, I am working on it.
Please help, thanks.
Definitely not the most elegant solution, but it seems to work:
#contentleft {
position: absolute;
top: 0;
bottom: 0;
}
.postarea {
position: absolute;
top: 0;
bottom: 10px;
left: 0;
right: 0;
}
It basically lets the right sidebar decide the height of #content, and then forces the left content to expand to fill the remaining space. Content might get cut off if the left column is taller than the right sidebar.
Please try to use max-height,min-height property.
I'm trying to position a check-mark next to a menu item by doing the following:
#userInfo div.dropDownContent p span
{
position: absolute;
margin-left: -20px;
}
A span inside a paragraph is absolutely positioned in order to preserve the centering of the menu item's text, otherwise the check-mark is centered along with the text and it makes it look bad.
As you can see in this jsFiddle, the check-mark looks ok in your average Windows browser, but Safari on Mac and iPad (perhaps even Chrome on Mac) shows the check-mark outside the menu, and there's nothing I can do to make it move even a pixel.
Does anyone know what I'm doing wrong? Is it a webkit bug? Thanks.
I do see that odd behavior in Safari, and I really can't explain why it's in that browser only.
That being said, this updated fiddle should show you what worked for me.
Basically, instead of positioning the span absolutely, I used relative positioning and set it to left -20px like so:
#userInfo div.dropDownContent p span
{
position: relative;
left: -20px;
}