Currently having a big problem with the layout of a site. It works fine in every other browser but for some reason, in IE, the menu's aren't expanding when they are clicked on. The screenshot below is how the list should look when a button is clicked on, this has also pushed down the elements of the bottom of the website such as the footer and images. The website address is www.citybathcoll.ac.uk if you want to see it first hand. From what I can see, it might be an unclosed tag but I can't see anything that stands out. Any help would be appreciated, Thanks.
Screenshot: http://imgur.com/ML3BYRk
Related
I'm having a problem with a slick carousel that loads and works (verified with Element Inspector) but does not appears on screen. Another slick carousel works fine in the same page. I've gone through it many times but can't find the problem and it's driving me nuts. Here's the link to the page, go to EXPERIENCIA section:
http://nhtest.esy.es/buro/index-06-06.html
Notice that the containing div displays perfectly, I've added it some text and a red border to check it.
You can see below the navbar that the main slick carousel works fine, but this other one doesn't display its contents. If you inspect it in small devices size, you can see that the first image loads, and then disappears, and if you look in the code inspector, you will see it working, but not displaying. For some reason it doesn't even show the first image in responsive inspection mode.
Looking forward to your answers, many thanks in advance!
Help. I just upgraded my website so that it's mobile-friendly. Now a lot of links don't work. In fact, the very same link will work in one place on the page (the menu), but then not work elsewhere on the same page. I seem to have numerous links throughout the site that don't work even though the code looks right. Even when I put in absolute coding, it still isn't clickable. I would appreciate any help.
Thanks. This is my home page: http://hotsermons.com/index.html
The problem you've added some divs on links, So when you hover on the link, you actually hover on this div not the link.
To solve this make sure you're using position and z-index properties correctly.
I have a strange behavior with drop down lists and button in my layout.
I have just made a fiddle here to illustrate how this looks like.
As you can see in the example, if you resize the browser the you can still open the lists or click on the Filter button which is ok.
When I do the same on my desktop, the first list will work properly, but the second and third list will not open as well the button in not clickable anymore.
I have spent the all day trying to fix this issue, unfortunately with no success at all.
Maybe someone of you guys have had the same issue or knows what is going on here?
Any help will be much appreciated.
I've encountered issue like that before when wrapper elements were stretching over other elements via zindex and couldn't track it down until i gave each element a background color and could see how they were transforming in size as i adjusted the window size.
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).
Okay, it's late at night and I can NOT figure this one out. I have 11 thumbnail images on a page HERE which are all hard coded (don't ask) and the code is IDENTICAL with exception to the filenames for the images and the query string attached to each of the link URLs.
The first two thumbnails (top left and top right) do not behave as links in Firefox, Safari, Chrome or Opera, but they DO in IE9 when hovered over (though in FF Firebug shows the link code is there) but all of the rest do. This has to be some inane jibberish I am too frazzled to see. Yet I reviewed the code over and over and nothing looks amiss.
What's worse, if I copy the code for the first two links (upper left and upper right thumbnails) and paste the code in below the first two entries, the thumbnails show up AND the links work!
Whatda...?
Any help will be sincerely appreciated!
Your div #mainText is large enough to go OVER the first two thumbnails. Different browsers either treat this differently or it has something to do with different takes on z-indexing or something, but decreasing the heigth of that div, or removing the height attribute (so its just as high as needed) will fix it...