I have a navigation bar at the top of my page. It works fine in Chrome but when I test the page in Firefox it causes the navigation bar to gain a lot of extra padding.
This page is the page in question
http://acrmgmt.com/CW_testing/
I would really appreciate if someone could please tell me as to why there is an issue and how to fix it.
Edit: Fixed now but I have no idea what caused the problem or how it was fixed besides the fact that I turned my computer off and left for the day then came back the next morning and everything was fixed.
Are you using any CSS reset methods at the start of your CSS? This is a way to set most browsers to common default padding, margins etc, before your desired styles are applied. Search on 'css reset'.
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).
I am working on a website simkt.com and just moved over to joomla 2.5 after rebuilding the base theme to match the desired look.
Unfortunately, being a novice web developer that I am, I forgot to check out how things looked in browsers other than Chrome. The site is now live, and I quickly discovered that in Firefox/IE that the website is not quite right, and after some adjustments, that when I make adjustments to try and fix the issues, there is around a 5 pixel difference in spacing between Chrome and Firefox/IE (and I tested now in IE 7 and it was.. quite bad).
So, my question is, what am I doing wrong, and how can I go about fixing this?
Using Chrome dev, I reduced the top-padding in rt-body-bg to 0, and in the logo itself, decreased the top-margin to -30 and bottom-margin to -25 and it looks close to what I want, but has a 5 pixel gap between the logo and the menu on Firefox, and in IE the login button starts to move off in some odd direction.
I know some css/php/html but am I am still learning, any help would be greatly appreciated!
Thanks!
Note that different browsers have different default values for the css for the different elements. A good practice when you program design with CSS is to use a reset values in the beginning of the css file. This reset is going to make sure that the unset values will be the same for every browser.
See this link for a css reset code
http://meyerweb.com/eric/tools/css/reset/
Hope it helps
As #Stoyan said, you should be using a CSS reset at the beginning of your CSS file.
You specifically mention margins. I've just had to resolve an issue whereby in our site margin-top was used to position items (not a great idea - blame the previous developers). In IE and Chrome it was fine but in FireFox, because it has a different top margin, it looked bad (items were 30px too low).
I didn't want to use an entire CSS reset because it might have had a knock-on effect for the entire site (fonts were all changed for example).
I used just one item to resolve it, curiously not margin-top but line-height:
body {
line-height: 1;
}
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!
I'm having serious problems with CSS floats in this wordpress theme in IE6/7:
http://032b4a6.netsolhost.com/WordPress/
This is the first WP theme I've coded, and while I've learned some great lessons for the future, the code is inelegant.
It works fine in modern browsers, but it is highly likely that a large number of visitors to this site will not have updated browsers.
It seems to me that there is a core issue that is repeated throughout the styling and if I can discover what that is, then I'll be a good bit closer to fixing the theme.
I found this page, which seems to offer some suggestions but, ultimately, makes my task sound impossible. Are there other resources or common suggestions that are offered for fixing cross-compatibility float issues with IE?
Even more importantly, if you are able to look at the site in IE6 or IE7, do you have any specific suggestions for how I might fix the floating issues?
I'm not sure it is an issue with the floats.
It appears that in your HTML code you may not have closed off the "sidebar" div before adding the "sidebar-alt" div. This means the "sidebar-alt" and "content-article" divs are contained in the "sidebar" div which only has a width of 120px - hence the reason they are all squashed up on the left.
To resolve the problem with the "Popular Images" and "Related Pages" headers, you could look at using a background-image within a div.
To resolve the nav bar, you need to remove the height and width from the 'a' tags.
I hope this helps fix your issues.