I'm having an odd problem with some floated divs on this page that I'm working on. There are 3 of them across the page, with 1em margins between. In Chrome they line up perfectly, but in IE and FF, the right hand one drops a little - but not all the way below. I thought this might be best described with a picture, please see below:
I can't work out which bit of the CSS is causing this - I've been through the new FF code inspector and highlighted all block level objects with the webdev toolbar but can't see anything that would cause such a drop.
I did wonder if it was something within the JS twitter feed causing it, but I've swapped round the Twitter and "Update" boxes and it's always the right-hand one. I've also tried removing additional elements from the page - everything between the menu and these three boxes.
I must admit, I'm at my wit's end! Can anyone spot something obvious I've missed? The CSS is fairly large, and I'm not sure which bit to show, so I haven't copied it in in, but will do if anyone desires. Otherwise everything can be viewed at http://www.woodexperts.com
Change width: 15.25em in div#main div.tricolumn to width: 15.24em
That should take care of the issue.
I understand that this is a hack, but if IE is the only browser causing problems, you might want to consider IE conditional comments that restrict certain styles only for IE:
http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx
Related
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...
On my home page in ie for some reason it makes a line about 3px high right about the content and right below the bread crumb bar. example.
Second problem, is that it also makes a box on this page
example
On the second example it messes with the user photo moves it into a box that should not be there. Along with the follow forum button. Which should be right below in the box as well. To see how it should look check those pages in any browser but ie. I really could use a fix for this. If its a css thing i have a ie specific css file i can put code in i just cant figure out what i need to put in there.
Also can someone check it out in ie 8 because i don't have it anymore and if there is a different fix maby you could help with that as well.
Looks like you have something going on that's changing your HTML or your DOM based on the browser. Likely you either have some client or server side code that manipulating things in a browser-variant way.
For example, in IE you have two DIVs with ID "boardindex", but I only see one in Chrome. Use F12 and/or Firebug to further investigate the differences. Isolate the code that's causing the differences using a binary search method if necessary.
I'll start by saying this is not my work, but I am trying to figure out how to fix it nonetheless... Here is the page in question:
http://www.getredwood.com/pro/
The three content areas at the bottom are the part in question. It looks fine when I look at it in Firefox or Chrome, but in IE 9, everything collapses left to right and the boxes actually overlap each other a bit. The CSS that's in there now looks a bit of a mess and I'm not sure where to begin. Would be most grateful for any ideas. Thanks!
I'm not sure whether I need to post the CSS code here or not...it should be visible through "Inspect Element" in FF, but if anyone can't see it, please let me know...
This lies within the compatibly that browsers have, what you will need to do is use javascript to determine which browser is in use then create a custom style for each, thus allowing you to make it work on any and all browsers
Here are some links that should help you out
http://www.quirksmode.org/js/detect.html
http://www.w3schools.com/js/js_browser.asp
Best of luck to you
it is very bad CSS and HTML coding...
try to reduce width of each 3 divs, should be solve your problem.
I have a fairly far-out box model for my portfolio website. It's actually really not but it required a little CSS magic to get the chamfer corners to work (I really wonder why chamfer corners do not exist in CSS). See it here.
Now, if you're on Firefox, and you navigate to my resume, you'll see a very mysterious margin going on at the top that I just can't seem to figure out. I was wondering if anyone could poke around with the Firefox dev tools and possibly figure out where this is coming from because I can't seem to figure it out. You may also notice a few other little graphical glitches on Firefox that are not present in any other browser, but hey, what can I say, I like that box look and I ain't gonna compromise.
Image depiction (from FF7.0.1, win7):
Add display: inline-block; to .box_content.
Not sure whats causing it but that should fix it. At least it did on my computer.
Validate your html for that list of errors that needs fixing. Then validate your CSS. I didn't run through that.
I rebuilt the "resume" section from the ground up. During this process I noticed a lot of margins being added to titles and such before I would edit the CSS classes that weren't added in other browsers. Margins seem to affect the "height=100%" rule as anyone whose tried to get a footer to stick to the bottom of their webpages might have figured out. So I chalk this one up to one of the titles getting a margin from one of Firefox's standard CSS stylesheets, I just couldn't find it.
Lesson of the day: ALWAYS set padding and margin to 0 for any custom class or id!