I'm having a CSS problem in Chrome (build: 17.0.9) with an image element that is not showing up. Please take a look at this link: http://next.lab501.ro/smartphone/nokia-n9-meego-to-go/3
In the top-right part of the main body you should see a list of pages with two image arrows acting as next and previous links. In Chrome only the next image arrow appears.
In any other browser (Firefox, IE9) everything shows up OK. What am I doing wrong?
You have to give .prev - float left [it will automatically make the element block]. is an inline element -> width, height, padding [top, bottom], margin[top, bottom] etc.. will not get applied unless its a block level element.
If you set float:left in your .prev element, it shows up, but you have to lower the right padding so it gets closer to the numbers.
In http://next.lab501.ro/wp-content/themes/new-theme/style.css, it says:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 12px 5px;
margin-right: 2px;
width: 23px;
height: 22px;
}
Add a float: left; to the end of that. I would also change the padding on the right side to move it closer to the numbers. I changed it to 0 in this case. The code now looks like this:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 0 5px;
margin-right: 2px;
width: 23px;
height: 22px;
float: left;
}
Related
I'm working on a presentation with ioslides (Rmarkdown). Since the corporate design rules for our university state that the logo should be on the right side (so the two faces look into the document) I'ld be happy if someone can help me with adjusting the ioslide theme via css or in the pandoc template.
The image and grey box should come in from the right side. I wasn't able to do that. All I could do was making the grey so long that is reaches the right side (which moves the logo as well cause it is relatively placed to the grey boxes right end as it seems to me).
Here is some CSS code I already found and experimented with:
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 90% !important; # with 250px instead of 90% it produces the image posted below
height: 170px !important;
}
This is the code produced after kniting: https://box.hu-berlin.de/f/d3d9e907fcef41a0bbf1/
I don't understand where the gdbar code resides in the first place. Would be happy about a hint here as well.
Edit: I have now this CSS setup and am almost done. Only the logo should be shifted a little bit to the left.
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 250px !important;
height: 170px !important;
}
aside.gdbar {
left: initial;
right: 0;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
background-position: right;
}
Best regards, Simon
Your element has left: -1px property what makes sure it's always on the left. If you set left to initial:
aside.gdbar {
left: initial;
right: 0;
}
or you remove this left setting then your element will move to the right.
I have this website I'm making for my aunt.
I seem to have a problem with this menu.
When I put the browser on my 1920x1280 screen it's all perfect but when I put it on a lower resolution screen the menu bar goes out of screen on the right, but what is strange about this is is that my width is at 100%.
You can find the website here : mathiasotw.be
Thanks in advance.
P.S.: if you want the code i can post it . but normally u can see the code by right-clicking and inspecting it or pressing F12.
You have applied 20px padding for DIV with ID menu
change it to
padding:20px 0;
It should work for you.
Your new css should be looking like below:
#menu {
background: none repeat scroll 0 0 white;
box-shadow: 0 1px 6px black;
float: left;
height: 70px;
padding: 20px 0; // here padding was declared as 20px.
position: relative;
width: 100%;
z-index: 999;
}
I have not gone through your entire CSS file but seen these styles applied in firebug through #menu ruleset.
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/
I have some strange behaviour in using padding.
I have a div as a wrapper. This wrapper has a padding of 25px to both sides:
.wrapper #header #navline #log form .small {
height: 25px;
width: 180px;
padding: 5px 25px;
}
in that wrapper I have an input field with the following css:
input[type="text"],[type="password"] {
font-size: 10px;
width: 180px;
height: 18px;
line-height: 18px;
padding-left: 5px;
padding-right: 5px;
outline:none;
}
and as error class:
input.error {
background-image: url(../images/error.png);
background-repeat:no-repeat;
background-position: 160px 50%;
width: 165px;
padding-left: 5px;
padding-right: 20px;
position: absolute;
z-index: 3;
}
so I'm getting crazy through setting it up the right way. The problem is that chrome/safari and Firefox seems to be different in handling padding properties. For example when leaving height property in chrome/safari there is something like padding top/bottom automatically added to the input field. in firefox there is a different height of the input field. to show an image:
firefox:
chrome:
the main problem is that I would like to center the input field in the wrapper div. the width of the input should be 180px. this means there is 25px to each side left. the text padding is also 5px to each side. so when using padding properties the new the width of the input field is the width minus the padding. so this will be the first question. when using pading-left and padding-rightof 5px is this equal to 180px(width input field) minus 10px (padding) or is the padding 0px because of the left hand side +5px and right hand side -5px? so what will be the correct width of the input field?
Second question is regarding to the error class. In that I will add a picture and would like to increase the right hand padding from 5px to 20px. even here the question whats the width of the input field? I thought the logic behind would be 180px minus +5px left, -20px would be 165px?
Third question: I tried all method but the result was different to each browser. Is there a failure behind my logic because padding should be padding or not?
Add css3 box sizing to every element that has padding. It will fix the issue.
.text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
I need some help with some CSS coding. I have been trying to get this navigation menu to center on the page and no matter what I do, I cannot get it to work. I have tried padding-left, margin-left, text-align:center, and nothing works. The menu continues to remain more to the left than the right.
Here is a screenshot of the problem: http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg
I'm sure it's something very simple, but I just can't seem to figure out what I am doing wrong?
Here is the live link of the page: http://blacktiphfishing.org/test.html
Any help is greatly appreciated!
If you remove the
margin:0; from #nav
it looks centered.
Tested in Chrome
first add overflow:hidden for #nav, #nav ul to clear floats. Then add margin:0 auto .But this always require a fixed width, so set it, for example: width:760px So the new css is:
#nav, #nav ul {
list-style: none outside none;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
width: 760px;
z-index: 30;
}
CSS layouts can be a bit of a headache sometimes. Try using 'inspect element' in chrome or firebug in firefox to enable/disable and alter styles to get fine tuned adjustments
You need to specify the exact width of the MainMenu div and set his left-right margin to auto if you want to reach a correct centered layout.
The exact width would be 780px (150px * 5 (5 link each row) + 10px * 2 (10px left + 10px right border) + 2px * 5 (right margin of each li))
Use this css :
#mainMenu {
background: none repeat scroll 0 0 #000000;
border: 10px solid #000000;
color: #FFFFFF;
display: block;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
To get the nav section centered