I am trying to make a website for my family's B&B and I don't have much experience with web coding.
This is a website template I bought from the internet, and I didn't have that many difficulties with it until now where I find myself completely stuck to a point where the contents of a specific webpage of the website are not displayed correctly across Chrome Firefox and Internet Explorer, mostly the problem is with IE since the viewing issues between Firefox and Chrome are close to none.
I was told on IRC that this is caused by the CSS not being read correctly from the browsers and that every browsers tend to view pages differently, and therefore I should create a specific css style for IE in order to address this compatibility issue.
Unfortunately though I haven't been able to find out what is causing the issue.
The "container" where those contents (just pictures and texts) are located in the page is called grid_11 and belongs to the grid.css file located in the css folder.
I tried to play with margin, something like
.container_24 .grid_11 {
width:430px;
margin-left: 40px
}
but the result is that the box containing all the contents moves throughout the page along with them.
Here I am at attaching the screenshots of how the page is displayed across the three browsers.
http://imgur.com/mgDYbD3,bZC3wHI,yd6BX8t
And here's the html code alongside with the css http://jsfiddle.net/r5QHW/
This is really getting above my pay grade now. I'd truly appreciate if someone could help me out with it.
Thanks,
Pietro
The question you want answered is one of the below... good luck!
Where is there a list of css property support by browser?
W3schools has lots of ads but is a good resource.
The CSS property support table: http://www.w3schools.com/cssref/css3_browsersupport.asp
The list of all references on their site: http://www.w3schools.com/sitemap/sitemap_references.asp
How do I debug code in a specific browser?
What you want is the Developer Tools. You actually open the page in the browser you're evaluating and then follow the instructions for each browser's developer tools to figure out what broke.
Chrome: https://developer.chrome.com/devtools/index
Firefox: https://developer.mozilla.org/en-US/docs/Tools
IE: http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx
Related
So I developed a profile on a website of mine in Firefox (the website accepts HTML in profiles). I then opened it in Chrome and, while there's differences and Pros and Cons I notice to each, I'm not really bothered by anything except the fact that my audio player at the top is properly styled in Firefox, but not in Chrome.
It seems to me that the "height" CSS didn't take in Chrome for some reason, meanwhile it takes just fine in Firefox.
Any idea how to fix this issue? If not, at least help me to make it so that it'll display normally in Chrome, even if it has to be fat instead of the slim bar I wanted. At the very least I want it to be functioning and not obscured by the page, even if it's not exactly what I had envisioned.
I've tried several #media "hacks" to target only Chrome / webkit but they don't take either.
Profile in question located here (flash required). Sources are freely available in the sources tab. The CSS classname is .BGM.
Thanks.
Edit: Images of the difference: https://imgur.com/a/EQyqD
You can see the problem - I want it to display correctly like it is in Firefox, not be crushed like it is in Chrome. I'd actually like to be able to style it further for Chrome - make it styled the same in Chrome as it is in Firefox - though I'm guessing that Chrome may just not be as flexible about this as Firefox is.
PS: Yes, insane that a site still runs on Flash over HTTP in 2018, and yes the profile designs on the site are all juvenile and edgy. It's a guilty pleasure of mine - and it's a nice little coding playground.
Change the height attribute within the .bgm class to something bigger, like 30.
If you're really attached to how the player looks on Firefox, you can also introduce some Chrome only margin to .bgm:
-webkit-margin-before: 12px;
If you want to make the Chrome player slimmer you will need to look into webkit masks, which requires an additional image file.
A client recently informed us that a store site I helped develop was displaying weirdly in Safari on desktop. I checked into his question and sure enough the client company's logo is getting cut off by the search bar:
Safari desktop view
I checked it against Chrome, Firefox and IE and all those seem to be displaying ok:
Chrome view
I double checked element styling and it looks ok, I even got my developer involved, and even he is stumped - says Safari should be using Webkit and as such should display consistently.
Link to the site
I've tried searching if others have had Safari-related rendering issues and haven't found any relevant articles. Wondering if there needs to be browser-specific conditional formatting in my markup.
I don't think you have a need for the third section, so remove that section and leave the container to be nested under the nav, it is the sixth nested element. Hopefully that should fix it :)
First, I've seen the duplicates
What is #shadow-root, and why does it put display none on my font awesome classes?
and
HTML / CSS - DIV Element hidden when it shouldn't be?
however both of these suggest the issue is with adblock and I have totally disabled adblock.
I am more concerned with where the #shadow-root is coming from, since I certainly did not put it there.
I have read that there is an option in chrome to disable it (and interestingly enough I have it disabled...), but this means that anyone using my website will need to do the same, and I'd rather just do away with it entirely as it provides zero usefulness in my application.
I have also googled and read many of articles about the shadow dom and none of them give any insight on why it would appear seemingly for no reason.
From what I have seen in inspector/view page source, the entire contents of my app are being rendered into this shadow dom and thereby not receiving any of my styles.
I am using rails, react, redux, react-redux, react-router
Chrome developer tool screen
Page Source screen
Notice that the source has nothing in the div that react should be rendering to.
Additional info:
displays unstyled page on chrome in normal and incognito
does not work at all in safari
A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.
I was having the same issue and found that it was Adblock Plus that was adding #shadow-root. Thanks to the resources above I was able to assertain what the issue
For me it was also an Adblocker (uBlock) and it was actually hiding part of the webpage I was making which showed imported tweets. Turning the adblocker off for my site fixed it.
Hey guys, i have recently created a HTML page but it is appearing differently in Mozilla Firefox and Internet Explorer. I have uploaded the page on ripway. Here is the URL http://h1.ripway.com/gurusmith/My%20site/Index/index.html
Please watch the page in both Internet Explorer and Mozilla Firefox and after watching you will find that the page is appearing fine in Internet Explorer but not in Mozilla Firefox. Can anyone tell where i have made the problems. If anyone can edit the source code and post the correct source code here which works fine in both the browsers then i will be really thankful to you.
Sorry, i can't post the source code and the outputs due to restrictions but i have given the link above for the page. So please do visit it and help me.
Your page is not even remotely valid HTML. For one thing, you have two body elements.
Check out W3C Validation of your page for more problems.
If a browser gets invalid HTML it makes its best guess at what the DOM should be (as opposed to a deterministic interpretation). Since browsers are designed by independent teams, these interpretations will differ. Then, when it comes to applying CSS, variations are bond to occur.
Get your HTML in order and then see what happens.
Older versions of IE are known to display pages slightly differently than most "modern" browsers. A quick Google search turned up the following lists of common differences:
http://www.wipeout44.com/brain_food/css_ie_bug_fixes.asp
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.