I am using the Spectrum template. The template automatically places at a gray border around all my images. Using some of the forums, I found a way to eliminate the border. It works in Internet Explorer, but the border is still appearing in Google Chrome. Any help would be much appreciated.
[resolved] Image border appears in Google Chrome, but not IE (18 posts)
-
chamershock
Posted 7 months ago # -
pete_voce
Posted 7 months ago #Do you have a link we can look at?
-
Posted 7 months ago #Yes, I'm sorry, I should have included that!
http://www.nafa.org/conference/?page_id=542
If I look in Google Chrome, a pale gray border is around the images. On Internet Explorer, there is no border.
-
Posted 7 months ago #It seems to have a lot of browser inconsistencies but I'm not seeing borders around images in Chrome. Can you give me a specific page/image?
-
Posted 7 months ago #The link I provided was a specific page, but maybe it's not showing up.
If you go to http://www.nafa.org/conference, click on the Sponsors tab on the top menu, that page has two logos that has borders around it. Let me know if you can see that page.
-
Posted 7 months ago #I can't actually get to that page. It redirects me back to the home page.
-
Posted 7 months ago #Can you get into any of the pages from the top menu?
Right now, since we're still working on the website, my programmer has it "hidden." I wonder if that's why...
-
Posted 7 months ago #I can get to About, Chapters, etc. The first page I found with an image is http://www.nafa.org/Template.cfm?Section=Join_NAFA but I don't see a border on it in Chrome.
-
Posted 7 months ago #That is a different site. It must have something to do with the fact that it's hidden still. I'm sorry, try this link:
http://www.nafa.org/conference/?preview=approved
I also did screen shots of one page:
Google Chrome - http://www.nafa.org/images/border_images.jpg
Internet Explorer - http://www.nafa.org/images/border_images_internetexplorer.jpgThank you for your time and patience. This has been so frustrating!
-
Posted 7 months ago #Oh now that's a much nicer looking site and from the Sponsors page I do see the gray outline around the Toyota Fleet image. It's actually not a border, it's a box-shadow declaration being set in the effects.css stylesheet on line 12. This explains why IE doesn't have it, because it doesn't support box-shadow. This shadow should also be present in Firefox due to the style declaration I mention above.
-
Posted 7 months ago #Thank you so much for finding this! You rock!
Now, this may sound silly, but how do I fix this? Where can I find the effects.css stylesheet? I went to Appearance > Editor > but I'm stumped after that.
-
Posted 7 months ago #You actually want to edit the custom.css file so you leave the original theme stylesheet alone. This will allow you to update your theme in the future without overwriting any styles you may modify. I'm not familiar with that specific theme, does it give you any screen that allows you to add your own CSS to the theme? If not and you don't see custom.css in the Appearance > Editor, use FTP to locate http://www.nafa.org/conference/wp-content/themes/spectrum/custom.css. Then add this rule to the custom.css file.
.post .entry img {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
-
Posted 7 months ago #You are a genius! That worked beautifully! Thank you for putting all your time and effort into this.
-
Posted 7 months ago #Glad I could help.
-
Posted 6 months ago #Hello pete_voce. Since you were so helpful last time, I am having another issue that I thought I could seek help on.
The website, now live, looks great on every type of browser on my computer. One of our advertising reps, however, said the pages look very messed up on her end and for everyone in her office. They are running Firefox version 3.6.23. I'm running Firefox 7.0.1 and everything looks fine. Is there a way to make sure the website is compatible with all browsers?
Website: http://www.nafa.org/conference
-
Posted 6 months ago #Browser testing is big part of my job and making sure the site looks consistent in supported browsers. The first thing you may want to do is find out which browsers you are going to actively support. If you have Google Analytics or any other web stats tracking going, look to see what most of your visitors are using. Looking at overall browser share http://www.w3schools.com/browsers/browsers_stats.asp, and then more specifically Firefox http://www.w3schools.com/browsers/browsers_firefox.asp, version 3.6 still represents about 9% of users as of September. That means you should probably still support it.
MultiFirefox is one tool that allows you to install multiple versions of Firefox. I use this one for versions 3.6, 5.0 and will be adding more soon http://davemartorana.com/multifirefox/. Another option is using something like VirtualBox to set up multiple virtual environments on which you could install different browsers. I also use that and have an instance of IE6 - IE9.
There are also services that you can sign up for that send you screenshots, such as BrowserShots, Browserling, BrowserCam, etc. I don't have experience with any of them but if you're not doing this very often they may be a good option.
-
Posted 6 months ago #Thanks so much for this information! The MultiFirefox is well worth it and checking those statistics, looks like we should definitely support Firefox 3.6.
The question is, how do you "support it?" What do I need to do differently in order for the website to look the same in all browsers? Do I need to check code or insert something into the code?
-
Posted 6 months ago #Well that's where the fun (heavy use of sarcasm) begins. It could be CSS related, it could be caused by page content or it could even be caused by ad code. I see the differences in FF 3.6 and it looks like there is some extra code getting dumped in that's affecting the layout. From viewing the source I see '<!------->' in the code beneath the main content area and before the sidebar starts. It looks like it is commenting out closing divs and code beneath it in FF 3.6. Try locating where/how that is getting inserted and remove it.
Reply
You must log in to post.
