I have a web page I am testing that is doing a slight shift to the left when I click on "Solutions". To toggle back and forth go to "Solutions" and then the logo.
http://jmcintosh.aisites.com/TRS/index.html
I know exactly what the problem is in my CSS. It's the "div.breakright ul li" for the orange dotted list items in the "Solutions" page.
I've tried multiple different ways but can not get the page to stop shifting.
Need another set of eyes or another way to apply it, look at it.
It's shifting left because of the scroll-bar. You only notice this shift when other pages don't require scrolling. This isn't a CSS issue, but you can make it unnoticeable via CSS.
html {overflow-y:scroll;}
Related
I have a header, which includes a navigation section and a logo section. I want the logo to align left and the navigation bar to align right. I've initially done this with float left (for logo) and float right (for navbar), but later decided to use "justify-content: space-between;" for the parent element (#header). (This does not change the nature of the problem.)
The problem when loading this with Chrome is that the header loads as if it is gradually expanding from the right and left edges toward the center. I don't see the same problem in Firefox. After loading it once, I cannot immediately replicate the problem, unless I wait for a few minutes or clear my cache and cookies. Here is the url that I'm experimenting at where you can (hopefully) view the problem:
https://www.omerfyalcin.com/experimental/
./style.css to see the style file.
This is pretty annoying since it prevents the transition between pages from looking smooth. Cannot find a solution despite extensive searching.
Thank you very much.
There's no sandbox so i cannot reliably try it but it's definitely related to transition: all 0.4s. There must be some kind of width change or something in the header and transition: all is causing that animation to happen. Make your transition to target more specific behavior.
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I've got to produce a print out of our records as per Creative's requirements. The layout is fairly simple, but it still makes use of the occasional highlight box and hairline ruler to divide up sections.
We have to support IE8, but for now, I'm developing in FF.
I currently have to go into Print Preview to examine my changes. It is a real pain to Close Preview, refresh the page with F5, then Alt-F+v to re-Preview every time I make the smallest change. Any way I can set my system up to view my changes more conveniently? I've got ReCSS, which is cool, but it does not work in Preview mode.
The only borders that seem to be supported are those around tables. So anywhere I need some element boxed, I end up wrapping it in <table><tr><td></td></tr></table> just to take advantage of the table border, which seems to be non-optional. Is there a more efficient way?
I need to divide content sections with horizontal rules (ideally several pixels thick, dashed or dotted). I have found no way to make a horizontal rule at all. I've tried styling my divs with border-bottom, which of course doesn't work. I've tried wrapping them in tables, then turning off the top left and right borders, which also doesn't work. I've tried <hr>, which also doesn't work. Ideas?
I hate to have to tell my Creative that they get text-with-a-side-of-text.
My page, it keeps on getting different menu width when i zoom in and out. It is fine in IE, and no one else. I did not spot any fixed positioning, this seems to be using relative position.
have tried playing and disabling all CSS property to my menu bar through google chrome inspect element.
turn this from none to auto: " -webkit-text-size-adjust: auto "
Tried to use em ex px for my font-szie and padding. I am juiced out of ideas, save me internet!!!
www.magentek.com
Try zooming out, you will find press room gets pushed down. I got this SimplyBiz theme from wpcrunchy. It seems even the paid version have this problem too. The CSS and html is way too large to post, too much bloated codes, i think is sufficient to just use chrome inspect element.
I took a look at the site, and my opinion is that the css and js that make up the menu functionality are creating a 6th menu element. That would explain why an extra little tab is hanging off the end there. Since it doesn't have any content, the browsers are all handling the whitespace a little differently.
Did you by any chance modify the menu to take it from 6 elements to 5?