My website is: kienanh.vn
When I'm testing cross browser I'm having trouble with Safari.
Any position I set: width: abc px; is not working in Safari? How do I fix it?
You can access my site with safari to see it!
My markup is:
<div id="wak">
<div id="quangcao1">
<div id="slider1"></div>
<div id="slider2"><div>
<div id="slider3"><div>
</div>
</div>
CSS:
#wak {
background-color: #FFFFFF;
margin: 0 auto;
max-width: 1000px;
}
#quangcao1 {
height: 345px; // i don't set width for this elem
}
#slider1, #slider2, #slider3 {
background-color: #F5F5F5;
float: left;
height: 335px;
padding: 5px;
}
#slider1 {
margin-top: 3px;
width: 490px;
}
#slider2, #slider3 {
width: 240px;
}
Now my issue is: convert px to em http://pxtoem.com/ I'm trying do it. I think it work!
You should validate your HTML - http://validator.w3.org/ - and fix any errors found. For example, id's need to be unique. You have multiple elements all with the id=wak. consider changing this to a class. This may resolve your issue.
Related
I'm making a page and I have some problems moving my scrollbar-div across the page, when in the right top corner everything works perfectly but when I try to move it to the center of the page with margin-left; and margin-top; the scrollfunction dose not work anymore! Could this have anything to do with the other elements on my page? Any tips or similar experiences?
Appreciate any help!
This code works, if I ad margin-top: 100px; it stops working!
Html:
<div class="scrollbox" id="style">
<div class="overflow"></div>
</div>
Css:
.scrollbox {
height: 300px;
width: 300px;
margin-left: 700px;
background: #ccc;
overflow-y: scroll;
}
.overflow {
min-height: 700px;
}
#style::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style::-webkit-scrollbar-thumb {
border: 1px solid #000;
}
Well, after posting the question I figured out the answer, or at least one answer, if
position: absolute; is added in the scrollbox{} element in the css code, it is possible to move the scrollbox without losing the scroll-function.
I have a nested structure where a div contains ul which in turn contains div. My requirement is to have content of most inner div display beyond the width (boundary) of ul or outer div.
/* Positioning */
#box1 {
position: absolute;
overflow: hidden
}
#box2 {
position: relative
}
#box3 {
position: absolute;
top: 10px
}
/* Styling */
#box1 {
background: red;
padding: 5px;
width: 125px
}
#box2 {
background: blue;
padding: 2px;
width: 125px;
height: 100px
}
#box3 {
background: green;
padding: 2px;
width: 500px;
height: 150px
}
<div id="box1">
<ul id="box2">
<li>
<div id="box3" />
</li>
</ul>
</div>
Refer https://jsfiddle.net/ob641d3s/
Note: This was working on Chrome 47 however it stopped working from Chrome 49 onwards on Mac. This is still working on Chrome + Windows
Remove the overflow: hidden property on the #box1 and it's good :)
Fiddle
Thanks for response everyone,
I was able to find a page that explains the solution very clearly and my problem is resolved following the steps described at following page
https://css-tricks.com/popping-hidden-overflow/
I just figured out that in my website botlane.net the header is not displayed correctly in Firefox.
Display in Chrome: (Correct behavior) (Also in Internet Explorer)
http://gyazo.com/b76f64331a59eb60e9fc4ade66d76fbb
Display in Firefox: (Wrong behavior)
http://gyazo.com/943e97e3762bf6b85e9d0b5e1c8a2ad0
I managed to recreate the problem in a JSFiddle
http://jsfiddle.net/e8ry9art/1/
HTML:
<div id="header">
<div id="headWrap">
<a href="/rankings">
<div id="navi1">
<span >RANKINGS</span>
</div>
</a>
<a href="/">
<span class="helper"></span><img id="logo" src="http://botlane.net/assets/images/logo3.png" alt="Logo" />
</a>
<a href="/legal">
<div id="navi2">
<span>LEGAL INFORMATION</span>
</div>
</a>
</div>
<div id="fulldash"></div>
</div>
CSS:
div#header {
width: 100%;
height: 10%;
min-height: 100px;
position: relative;
}
div#headWrap {
width: 1224px;
height: 100%;
margin: auto;
text-align: center;
white-space: nowrap;
}
div#navi1 {
float:left;
height: 100%;
width: 200px;
}
div#navi1:hover {
color: #FFAD19;
}
div#navi2 {
float: right;
height: 100%;
width: 200px;
}
div#navi2:hover {
color: #14CC67;
}
Can anyone tell me what is the problem here?
Try replacing with these styles:
div#headWrap {
width: 1224px;
height: 100%;
margin: auto;
text-align: center;
}
div#navi1 {
float:left;
height: 100%;
width: 200px;
margin-top: 24px;
}
div#navi2 {
float:right;
height: 100%;
width: 200px;
margin-top: 24px;
}
The above styles work because of the removal of white-space: nowrap. The nowrap property is intended to keep text from wrapping to the next line, and can conflict with text-align: center since the parent reference for centering is handled differently by firefox.
Try this base on my comments:
div#header {
width: 100%;
height: 10%;
min-height: 100px;
position: relative;
}
div#headWrap {
width: 1224px;
height: 100%;
margin: auto;
text-align: center;
}
div#navi1 {
float:left;
height: 100%;
width: 200px;
white-space: nowrap;
}
div#navi1:hover {
color: #FFAD19;
}
div#navi2 {
float: right;
height: 100%;
width: 200px;
white-space: nowrap;
}
div#navi2:hover {
color: #14CC67;
}
.vmiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div id="header">
<div id="headWrap">
<div id="navi1">
RANKINGS
</div>
<span class="helper"></span> <a href="/"><img id="logo" src="http://botlane.net/assets/images/logo3.png" alt="Logo" />
</a>
<div id="navi2">
LEGAL INFORMATION
</div>
</div>
<div id="fulldash"></div>
</div>
There are a few things wrong here and I think Chrome and whatever browser is displaying this as intended by you is just a little bit more forgiving.
First, when using the CSS id selector (e.g. div#navi2) you don't need to prepend the tag name of the element you're targeting. #navi2 is specific enough and everything else is just clutter.
Second, why those extra divs inside the a elements? You can spare those and directly work with the link elements. They are just as fine.
Third, you're applying your layout code (float) to elements that are further down the DOM hierarchy than the one layer you're actually targeting. You're trying to sort things out in #headWrap and should therefor work with its direct children. But instead you're skipping the a elements completely and apply your code to the divs. While this isn't wrong per se, in general this means trouble.
Fourth, floated elements (like your links) should come before the element that is being floated. Just a tip to avoid headaches.
I forked your Fiddle with an improved version: http://jsfiddle.net/maryisdead/Lsrhjnby/
Here is my code.
HTML:
<div id="socmed">
<div id="icons">
<div id="fb"></div>
</div>
</div>
CSS:
#socmed {
height: 100px;
padding-top: 70px;
padding-bottom: 50px;
background-color:rgba(247, 34, 34, 0.7);
width: 100%;
}
#icons {
width: 300px;
height: 75px;
margin: 0px auto;
}
#fb {
height: .89in;
width: .89in;
background-image:url("../images/facebook_dark.png");
}
#fb:hover {
height: .89in;
width: .89in;
background-image:url("../images/facebook_active.png");
Currently, neither logo shows up in my "socmed" div. Anyone know what I'm doing wrong? Stumped.
check the following steps:
1.Image contains folder path (inspect the path)
2.If image size is big it won't appear full image.so it will appear partial image according the mentioned dimension.for that problem use background-size property
Take a look :DEMO
I have been building a website and mainly testing it in Chrome.
Recently I realised some of the CSS does not apply in Firefox.
I guess it's probably : main { min-height }
This jFiddle reproduces this error, where the main div doesn't have the height it's supposed to. http://jsfiddle.net/msW9m/
HTML :
<div id='main'></div>
<div id="container"></div>
<div id='footer'>
<div id='footerRelative'>Development by <a href='mailto:'>John Doe</a></div>
</div>
CSS :
#main {
min-height: 80%;
height: auto;
border: 1px solid #bbbbbb;
margin: 3% 5% 1%;
padding: 10px 10px;
}
#footer {
position: absolute;
left: 50%;
}
#footerRelative {
position: relative;
left: -50%;
font-size: 80%;
}
/*Probably Irrelevant*/
#container {
margin: 0 auto;
margin-top: -300px;
margin-left: -261px;
position: absolute;
top: 50%;
left: 50%;
width: 523px;
height: 600px;
background-image: url('../images/doctorSymbol.jpg');
background-repeat:no-repeat;
background-position:center;
opacity: 0.125;
overflow: hidden;
z-index: -1;
}
However, in Chrome everything works perfectly and the main div has a min-height of 80% . I was wondering if there is a workaround to this or If I am doing something wrong.
Thank you.
Have you tried making body and html 100%?
In some browsers, the body element doesn't keep 100% height until its content is full.
http://jsfiddle.net/HRKRN/
html, body {
height: 100%;
}
Also a possible solution that worked for me: set the div's display to table-cell.
use CSS3 to solve this issue
http://pastebin.com/Q8727Kvt
Align vertically using CSS 3