I'm having some wierd css issue making a website for a client which only occur if using google chrome. on firefox, explorer and edge, it does work fine.
Basicly, some code I used several times in the same page, works everytime except for one. I really cannot see where I did wrong:
<h2 class="big caps" style="text-align:left">WHAT WILL YOU LEARN?</h2>
page is here: if you scroll down to the middle of the page you'll see what i'm talking about. look at it with google chrome first, and then with any other browser. (or source code # line 370)
What am I doing wrong?
Update your .one_full class like below
.one_full {
float: left;
width: 100%;
}
Just add to .one_full class clear:both and it will work.
you can add float:left or clear:both to .one_full
.one_full {
width: 100%;
clear: both;
/*or float: left;*/
}
Related
i'm creating a responsive layout but i'm noticing a centering problem. I have three div (three boxes, each one next to the other) and i put them into a parent div to make the alignment. The strange thing is that on dreamweaver all works perfectly, but when i open the HTML file to test the page locally the centering is not correct. Here's the images so that you can understand better.
On Dreamweaver
click
When i open the HTML page locally
click
In the first screen as you can see, right and left spaces are perfectly equal, in the second screen left space is more narrow. I'd love to know why on dreamweaver is ok. Here's the code i used.
#infoInner {
margin-left: 0.5%;
margin-right: -0.5%;
}
.boxInfo {
padding: 2% 2%;
margin: 0 1.5%;
width: 26%;
border: 1px dashed white;
float: left;
}
Browsers by default tend to add styles to the document. This is why projects such as normalize.css exist to remove them, however, this is not the solution to your problem.
When a web browser displays code, it's the rendering engine that interprets the code to then lays it out to the screen. Chrome uses Blink, Safari uses Webkit, Internet Explorer uses Trident, and so on. After a bit of research, I see that Dreamweaver used the Presto rendering engine until version 3, and then moved to Webkit on version 4 / 5. I am not sure about the version DW6, I am also going to assume it is Webkit (EDIT WELCOMED). You should receive a similar result if you open your code up in Safari.
I recommend you open a new question with your code represented in a jsfiddle for members of SO to help you out and get it the way you want to look. However, from the description and the code posted it seems to be a rendering issue.
Further Reading:
http://en.wikipedia.org/wiki/Web_browser_engine
http://mashable.com/2014/02/26/browser-testing-tools/
https://www.youtube.com/watch?v=7bs9RGolIyI (More for the comedy)
Can you do that on this way:
<div class="wrapper">
<div class="item"></div>
<div class="item center"></div>
<div class="item"></div>
</div>
.wrapper {
text-align: center;
width: 100%;
}
.wrapper .item {
float: none;
display: inline;
width: 32%;
margin: 0px;
}
.wrapper .item.center{
margin-left: 1%;
margin-right: 1%;
}
I hope this help! :)
I have been searching the web for a solution for 3 hours without success. I want to set overflow: auto to tag as follows:
td {
overflow:auto!important;
}
It works fine in chrome but not in Firefox. I checked my entire css file by w3c css validator.
There is no error too. Any idea please? I am sorry if it is very silly question but everyone have to learn this first to be expert.
Try wrapping it in a <div>. The overflow attribute is not defined for a <td> element.
See here
Try to put your overflow:auto to the wrapper like this,
pre, div {
width:100%;
overflow: auto !important;
}
See demo
Try this
td {
height: 20px; // mention a height
overflow:auto!important;
}
I'm developing this site here for a client of mine: http://test.bebiafricanhairbraiding.com/osa/index.html
I've encountered a problem that I've never really had before, IE works fine with it, as well as Google Chrome; however, Mozilla Firefox shoves all the content on the front page to the far right - off of the main page.
I can't really provide any code because I can't really determine where the problem lies, however, feel free to inspect source and snoop around a bit. I just can't figure out why Mozilla just now got the audacity to throw my main page out the window...
Thanks if you can help!
Your table is being floated off your page, just add clear:both to it and it will place itself correctly.
<div id="cnbo">
<!-- InstanceBeginEditable name="Body" -->
<table style="width: 100%; clear: both;"> /* here */
....
#Andres llich is correct. But I would put it in the CSS itself and not as a style in the table.
#cnbo {
font-family: "Arial",Times,serif;
margin-top: 2px;
text-align: left;
width: 100%;
word-wrap: break-word;
clear: both;
}
On this page, the footer does not display correctly in Chrome 17. All the links should be evenly spaced on a single line, but instead it looks like this:
It looks fine in IE and Firefox, does anoyone have a suggestion for how I can fix the problem in Chrome without breaking it in one of those other browsers?
update this id in your css --
ul#footerLinks li {
display: table-cell;
width: 160px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
float: left;
}
Without the display:table-cell also it should work.. so.. its redundant - you can remove it if you want.
Hm... One time when I loaded the page, it looked fine. The next time, it looked like the screenshot you have above. It seems like a Chrome rendering bug. I'd try using display:inline-block instead of table-cell. Alternatively, just render them as inline and center the menu horizontally. The way they are spaced now isn't very rhythmic, in my opinion.
Use float:left; in your anchor tags.
I've got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I've racked my mind as to which CSS could remedy this problem but I've come up short every time.
If you look at this link in chrome, near the bottom you'll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there's nothing. Could someone please check it out and let me know, I'm stumped...
The CSS code is:
body div.mr_social_sharing_wrapper {
clear: both !important;
overflow: hidden !important;
height: 40px !important;
width: 960px !important;
z-index: 2000 !important;
line-height: 30px !important;
float: left;
}
span.mr_social_sharing,
span.mr_social_sharing_top {
float: left;
}
And yes, I know using !important is poor form; it was inherited and not by choice :)
Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.
If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.