This works fine in Firefox, but top section doesnt work on IE. I have looked through other responses and tried to add line-height=1; but didnt work.
The problem is the Top header, should be red white and blue, like firefox. On IE is black, black, then blue.
#ja-header-a {background:url(../images/header-bg.png)repeat-x bottom #B70000;}
#ja-header-a .main {padding:15px 0;}
#ja-header-b {}
Here is the link to the test site, try opening it in IE then firefox.
http://www.alumnifootballusa.com.php5-21.dfw1-1.websitetestlink.com/index.php/123
Here is the full code:
*==========general==========*/
body {font-family:Verdana, Arial, sans-serif;}
body#bd {}
#ja-wrapper {}
#ja-inwrapper { }
#ja-right {
background-color: #000000; }
/*==========header==========*/
#ja-header-a {background:url(../images/header-bg.png) repeat-x 0 bottom #B70000;}
#ja-header-a .main {padding:13px 0;}
#ja-header-b {}
h1.logo, div.logo-text h1 {font-size: 250%; line-height: 1; margin-left: -65px; margin-bottom: -50px; }
/*logo image*/
h1.logo { }
h1.logo a,
h1.logo-offline {background: url(../images/logo.png) no-repeat left;display: block;}
h1.logo-offline {margin:0 auto 25px auto;text-indent:-2000px; overflow:hidden;}
/*logo text*/
div.logo-text h1 {font-size: 200%;font-family: Arial, sans-serif;font-weight: bold;}
div.logo-text h1 a {text-decoration: none;}
p.site-slogan {color: #ccc;display: block;font-size: 85%;margin: 3px 0 0;padding: 0 10px;text-transform: uppercase;}
/*header tools*/
#ja-tools {position:absolute;right:35px;bottom:35px;text-align:right;}
#ja-tools ul.tool-list {float:right;text-align:right;}
#ja-tools > ul.tool-list > li {float:right;margin-left:20px;}
.topnav {margin-top:5px;}
.topnav ul {text-align:right;}
.topnav ul li {
display:inline;
padding: 0 10px 1px 9px;
background:url(../images/border-top-menu.png) no-repeat right center;
}
.topnav ul li:last-child {background:0; }
.topnav ul li a {}
/*==========navigation==========*/
#ja-mainnav {background:url(../images/nav-border.png) repeat-x bottom;padding-bottom:1px;}
#ja-mainnav .wrap-inner1 {padding:12px 0 0 0;}
#ja-mainnav .wrap-inner1 > .main {right:-165px; bottom: 5px;}
#ja-mainnav .main {}
#ja-mainnav .main .main-inner1 {}
.menu-desc {font-size:11px!important;}
#ja-subnav {background:url(../images/drop-menu-bg.png) repeat-x top;}
/*==========main featured==========*/
#ja-featured {background:url(../images/featured-bg.png) repeat-x bottom;padding:20px 0 45px 0;}
/*==========main container==========*/
#ja-container {}
#ja-container .content-wrap1 {background: url(../images/content-bg-bottom.png) repeat-x bottom; }
#ja-container .main {}
.main .main-inner1 { margin-left: 0; margin-right: 0; }
/*==========spotlights==========*/
#ja-topsl-a,
#ja-topsl-b,
#ja-botsl-a,
#ja-botsl-b {padding:10px 0!important;}
#ja-topsl-a .ja-box,
#ja-topsl-b .ja-box,
#ja-botsl-a .ja-box { background:0;}
#ja-botsl-b .ja-box {}
#ja-topsl-a .ja-box-right,
#ja-topsl-b .ja-box-right,
#ja-botsl-a .ja-box-right,
#ja-botsl-b .ja-box-right { background: 0;}
#ja-topsl-a .ja-moduletable,
#ja-topsl-b .ja-moduletable,
#ja-botsl-a .ja-moduletable,
#ja-botsl-b .ja-moduletable {margin-top: 10px;margin-bottom:0!important;padding-bottom:0!important;}
/*top spotlights*/
#ja-topsl-a .main,
#ja-topsl-b .main { padding: 0; }
#ja-topsl-b {
background:url(../images/topsl-bottom-bg.png) repeat-x bottom;
padding-bottom:30px!important;
margin-bottom:20px;
}
/*==========bottom==========*/
#ja-bottom {
color:#bdbbbb;
text-shadow: 0 1px 1px #000;
background-image:url(../images/grad-bottom.png);
background-repeat:no-repeat;
background-position:center top;
}
#ja-bottom .bottom-wrap1 {
background:url(../images/bottom-top-bg.png) repeat-x top;
padding-top:30px;
}
/*bottom spotlights*/
#ja-botsl-a .main,
#ja-botsl-b .main { padding: 0 0 15px 0; }
#ja-botsl-a .main-inner1 {}
#ja-botsl-b .main-inner1 {}
#ja-botsl-b { }
/*==========footer==========*/
#ja-footer { background:url(../images/footer-bg.png);margin-bottom:35px;padding:0;}
#ja-footer .wrap-inner1 { background:url(../images/footer-border.png) repeat-x top;}
#ja-footer .wrap-inner2 { background:url(../images/footer-border.png) repeat-x bottom; padding:20px 0;}
#ja-footer .main { padding: 0; position: relative; text-align: left; }
#ja-footer .inner { padding: 0; }
#ja-footer small { font-size: 100%; }
/*footnav*/
#ja-footer .ja-footnav { font-size: 100%; margin: 0; overflow: hidden; position: relative; }
.ja-footnav ul { line-height: normal;text-align:right;float:right;margin-right:15px; }
.ja-footnav li { display: inline; padding: 0 5px; }
.ja-footnav li a { }
.ja-footnav li a:hover,
.ja-footnav li a:active,
.ja-footnav li a:focus { }
/*copyright*/
.ja-copyright { float:left;width:48%; }
.ja-copyright small { display: block;padding-left:15px; }
/*==========miscellanous==========*/
#ja-poweredby {position:absolute;left:450px;top:0; }
.t3-logo-dark-sm a {background-image: url(../images/t3-logo.png) !important;}
#ja-top-panel .main-inner1 {border: 2px dotted #e2e2b5;padding: 5px 10px;text-align: center;margin-top: 15px;background: #ffffcc;position: relative;}
#ja-banner {border-top: 1px solid #ccc; }
div.ja-innerdiv {border-bottom: 1px dotted #ccc; }
div.ja-innerdiv h4 {font-family: Helvetica, Arial, sans-serif;font-size: 92%;font-weight: normal;text-transform: uppercase;}
a.ja-icon-video {background: url(../images/icon-youtube.gif) no-repeat 5px 8px #fff;border: 1px solid #ccc;color: #666;display: block;font-weight: bold;position: absolute;padding: 5px 5px 5px 43px;right: 10px;top: 8px;text-decoration: none;width: 35px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;box-shadow: 0 0 3px rgba(0, 0, 0, .2);-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .2);-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);}
a.ja-icon-video span { color: #666; }
a.ja-icon-video:hover,
a.ja-icon-video:focus,
a.ja-icon-video:active { border-color: #ddd; text-decoration: none; }
a.ja-icon-video:hover span { color: #0F85D8; }
#ja-absolute .main {position: fixed;width: auto;height: auto;z-index: 99999;top: 1px;left: 1px;}
#ja-absolute .main a {width: 91px;height: 99px;overflow: hidden;display: block;background: url(../images/joomla15.png) no-repeat left top #fff;text-indent: -9999px;}
#ja-absolute .main a:hover,
#ja-absolute .main a:focus {background-position: left bottom;text-decoration: none;}
I think your problem might be background shorthand which is not properly formatted. Firefox might work around it but IE is really picky.
background:url(../images/header-bg.png)repeat-x bottom #B70000;
Usually you should write the background shorthand like:
background: <color> || <image> || <repeat> || <attachment> || <position>;
So:
background: #b70000 url(../images/header-bg.png) repeat-x bottom;
Try to add the !DOCTYPE deceleration before the <html> tag
IE8 doesnt seem to pick up the css rule for #ja-header-a.
I think the syntax is wrong.
Try the following
#ja-header-a {background:url(../images/header-bg.png) repeat-x 0 bottom #B70000;}
Related
I'm working on a project for a payments company and they require the use of an external page in order to collect payment information.
The only modifications that you can make to this page are supplying a custom CSS file.
There is no meta view port tag on the page, if I add one manually to my browser it works exactly how I want it to, however there is no way to add it to their page since it is controlled by a huge payment company not willing to make any changes.
Is there any way around this? I've tried using the #media tag to my css to change zoom based on screen size since that seems to help, but it doesn't take when I add it to my CSS.
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
html{
background-color: #2c3745;
}
.PageBody{margin: auto; margin-top: 10px; border-radius: 5px; background-color: white; padding: 30px; max-width: 600px;font-family: 'Roboto', sans-serif;height: auto;min-height: auto;}
.PageContent{ width: auto;color: #000000;margin-left: auto;margin-right: auto;font-size: 14px; }
.ErrorBackground{ border: 1px solid #C79595 !important;background-color: #FAF2F2 !important; }
.ErrorMessage{ margin-bottom: 10px;border: 1px solid #DB9494; padding: 9px 10px 10px 35px; background-color: #FAF2F2;background-image: url("../images/Error.png"); background-position: 10px 10px;background-repeat: no-repeat;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px; }
.RequiredField{color: red;font-size: 13px;float: right;margin-left: 5px;}
.FieldSet{border: 0px solid #D3D3D3;padding: 0;margin-bottom: 0;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;}
.Legend{padding-left: 0;padding-right: 7px;color: #A3A3A3;display: none;}
.Label{ display: inline-block;padding: 3px 0px 3px 0px;width: 320px;vertical-align: top; }
.TextBox{width: 100%;height: 38px;border: 1px solid #d8d8d8;padding: 0;font-size: 14px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
.DropDown{width: 300px;height: 40px;border: 1px solid #d8d8d8;padding: 3px;font-size: 14px;border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;}
.LabelColon{padding-left: 3px;display: none;}
.hppFrame {width: 100%;}
.FieldSetOrder{display: none;}
/* IE8, 9 and 10 Specific Styles */
#media screen\0 {
.LegendIe{ display: inline-block;position: relative;top: -20px;left: -3px;background-color: #FFFFFF; }
}
#media screen and (max-width: 648px) {
/* .FieldSet {width: 100%;}*/
.FieldSetOrder .FormRow {margin: 0;}
.FormRightColumn input {width: 100%!important;}
.FormLeftColumn {text-align: left!important;line-height: 23px;}
.Label {width: 100%;}
.FormRightColumn {width: 97%;}
.FormRow {
width: 100%!important;
margin: 0;
}
.FormExpDateMonthField {width: 144px!important;}
.FormExpDateYearField {
width: 145px!important;
}
}
#media screen and (min-width: 649px) {
.FormRightColumn {
width: 62%;
}
.FormRow {
width: 100%;
}
.FormRightColumn input {width: 100%!important;}
}
#btnSubmit {
background-color: #5C9DEC;
color: white;
border: none;
}
#btnCancel {
border: 1px;
color: black;
background-color: white;
border: none;
}
.button {
border-radius: 3px;
margin-top: 10px;
height: 30px;
width: 90px
}
.PageHeader{}
.PageFooter{}
.FormContainer{}
.FieldSetOrder{}
.LegendOrder{}
.FieldsetCreditCard{}
.LegendCreditCard{}
.FieldsetBillingInfo{}
.LegendBillingInfo{}
.FormRow{margin: 0;width: 100%;}
.FormLeftColumn{width: auto;display: inline-block;white-space: nowrap;text-align: left;vertical-align: top;margin-right: 8px;padding-top: 4px;color: #707070;font-weight: bold;clear: both;display: table;font-size: 13px;margin-bottom: 7px;margin-top: 10px;}
.FormRightColumn{/* display: inline-block; */vertical-align: middle;}
.FormAmount{}
.FormAmountLabel{}
.FormAmountValue{}
.FormAmountField{
font-weight: bold;
}
.FormInvoice{}
.FormInvoiceLabel{}
.FormInvoiceValue{}
.FormInvoiceField{}
.FormComment1{}
.FormComment1Label{}
.FormComment1Value{}
.FormComment1Field{}
.FormComment2{}
.FormComment2Label{margin-bottom: 7px;}
.FormComment2Value{margin-bottom: 7px;}
.FormComment2Field{}
.FormName{}
.FormNameLabel{}
.FormNameLabel1{color: #BEBEBE;font-weight: normal;font-style: italic;}
.FormNameValue{}
.FormNameField{}
.FormCardNumber{}
.FormCardNumberLabel{}
.FormCardNumberValue{}
.FormCardNumberField{}
.FormExpDate{}
.FormExpDateLabel{}
.FormExpDateValue{}
.FormExpDateMonthField{width: 177px;}
.FormExpDateYearField{width: 178px;}
.FormCvv{}
.FormCvvLabel{}
.FormCvvValue{}
.FormCvvField{ width: 95px; }
.FormDescription{
display: none;
}
.FormDescriptionLabel{}
.FormDescriptionValue{}
.FormDescriptionField{}
.FormAddress1{}
.FormAddress1Label{}
.FormAddress1Value{}
.FormAddress1Field{}
.FormAddress2{}
.FormAddress2Label{}
.FormAddress2Value{}
.FormAddress2Field{}
.FormCity{}
.FormCityLabel{}
.FormCityValue{}
.FormCityField{}
.FormState{}
.FormStateLabel{}
.FormStateValue{}
.FormStateField{}
.FormStateDropDown{}
.FormZip{}
.FormZipLabel{}
.FormZipValue{}
.FormZipField{ width: 95px; }
.FormCountry{}
.FormCountryLabel{}
.FormCountryValue{}
.FormCountryField{}
.FormBankAccountType{}
.FormBankAccountTypeLabel{}
.FormBankAccountValue{}
.FormRadioButtonField{}
.FormBankAccountNumber{}
.FormBankAccountNumberLabel{}
.BankAccountNumberNumberValue{}
.FormBankAccountNumberField{}
.FormBankRoutingNumber{}
.FormBankRoutingNumberLabel{}
.BankRoutingNumberNumberValue{}
.FormBankRoutingNumberField{}
.AcceptOnlyNumbers{}
.input-validation-error { }
.field-validation-error { display: table }
.field-validation-valid { display: none }
.validation-summary-errors { display: none }
.validation-summary-valid { display: none }
.FormBankAccountValue input[type="radio" i] {
width: 20px !important;
height: 10px;
}
.FormBankAccountValue label {
width: 50%;
float: left;
margin: 5px 0;
}
You have to find the CSS elements which are preventing the page from responding in the vanilla HTML and overwrite them in your CSS file.
I have this css style code:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,dl,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
#media (max-width:600px) {
* {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
//position:fixed; //(relative, absolute, static*)
//top: 120px;
//left: 120px;
//bottom: 120px;
width: 960px; margin: 0 auto;
}
.ss_scripted img {
display:none;
}
.ss_scripted .ss_show {
display: block;
}
#slideShow img {
margin:0 auto;
}
#slideCounter {
text-align:center;
padding:0.25em 1em;
font:bold 200%/120% consolas,courier,monospace;
color:#C00;
}
#slideControls {
width:512px;
padding:0.5em 0;
margin:0 auto;
}
#slideControls a {
float:left;
padding:0.25em 0.6em;
text-decoration:none;
color:#000;
background:#EEE;
border:2px solid #666;
-webkit-border-radius:1em;
-moz-border-radius:1em;
border-radius:1em;
-webkit-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
-moz-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
}
#slideControls a:active,
#slideControls a:focus,
#slideControls a:hover {
background:#FFF;
}
#slideControls .next {
float:right;
}
I changed the part in the body:
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
//position:fixed; //(relative, absolute, static*)
//top: 120px;
//left: 120px;
//bottom: 120px;
width: 960px; margin: 0 auto;
}
Unmarked 3 lines and added the width and margin 0 auto
If i was using this 3 lines without the width and margin then the slideshow was displaying in the left bottom.
Now the slideshow is displaying in the middle top. But i want it to be in the screen center not middle top:
Middle Top
What should i change/add ?
Try this:
<div id="slides">
<--! slider here -->
</div>
#slides{
margin-right: auto;
margin-left: auto;
display: block
}
I am going to assume your middle part is 300px width and 300px height.
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
position:fixed;
top: 50%;
left: 50%;
margin-top:-150px; /* 50% of the exact height */
margin-left:-150px; /* 50% of the exact width */
}
You can use div tags for styling..
Below I have used the attribute style and set the margin from top...
For example,
<div style="margin-top:200px">Your slideshow content </div>
I'd like to add a divider between my page tabs on my blog so it looks like this:
About Me / My Work / Contact / Blog
I don't want the slashes to turn green when they're moused over.
Here's my blog: http://clairestrick.blogspot.com/
I'm really new to this and I'm using the Simple template. Here's the code for the header and tabs:
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
Please try with
<ul>
<li>About Me
<span>/</span></li>
<li>My Work<span>/</span></li>
<li class="selected">Contact <span>/</span></li>
<li>Blog</li>
</ul>
This helps you to add a divider between tabs
.tabs .widget li:after {
content: "/";
}
This is driving me crazy. I am building a new horizontal scrolling website in Wordpress. The header and footer are simple fixed elements, but the page content scrolls horizontally. I am not trying to do this within a post, but as a page. Everything works fine up until I hit a certain width and then a new line is created of my images, messing up the flow of the entire page. It also then hides the footer. I have looked at this in multiple browsers and am stuck as what to do. Shouldn't I be able to horizontally scroll for as long as I want? It seems like I hit some sort of maximum width on my website.
Here it is looking good and then if I add two more images in the same manner using divs it skips a line and screws everything up and looks bad.
Please help. Here is the relavent CSS:
/************************* GLOBAL STYLES ***************************/
body {color:#eee; background: #000000}
.container-inner {position:relative; overflow:auto}
.container {background:#111; position:relative; overflow:auto}
h1,h2,h3,h4,h5,h6 {color:#eee;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#eee;}
h3.sub,h2.sub {margin: 0 0 10px 0;padding: 0 0 5px 0;font-size: 1.9em;font-weight: bold;line-height: 1em;text-transform: uppercase;letter-spacing: 2px;color: #515151;border-bottom: 1px solid #000;}
a {color:#428ce7;text-decoration:none;}
a:hover, a:focus {color:#fff;}
p {color:#eee;}
h6.top {color:#ccc;}
.login {float:left;}
/* Posts */
.content {font-size: 1.2em; position:relative; overflow:auto}
.content h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.post {display:block;font-size: 1.2em;}
.post h4, .post h6 {font-size: 1.2em;}
.post h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.postmetadata {background:#000;padding:1em;color:#999; font-size:10px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.postmetadata a {}
.postmetadata a:hover {color:#fff;}
.underlined {border-bottom:1px solid #eee;}
h6.underlined {margin:0 0 1em;}
.welcomebox {padding:1.5em;margin-bottom:1.5em;color:#eee;text-shadow: 1px 1px 1px #000}
.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;}
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;}
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;}
.nav {background:#eee;margin:0 0 1em 0;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.nav:hover {background:#ccc;}
.prev a, .next a {color:#222;text-decoration:none;padding:.2em 1em;}
.nav-interior {margin:0;padding:0;clear:both;display:inline;}
.nav-interior .next {color:#000;text-decoration:none;float:right;}
.nav-interior .prev {color:#000;text-decoration:none;float:left;}
/* Paragraph */
#paragraph {margin:0px 30px 0px 30px; text-align:justify;}
/* Horizontal Scroll */
#wrapper {
float:left;
margin:40px 20px 30px;
margin-right:-999em;
position:relative;
overflow:auto;
}
.floatbox {
float:left;
margin:0 20px 0 0;
white-space:nowrap;
}
.floatbox img {float:left;}
.floatboxtext {
width:480px;
float:left;
margin:20px 60px 0 40px;
font-family:"Courier New", Courier, monospace;
text-align:justify;
font-size:.8em;
overflow:hidden;
}
/* Footer */
#footer {padding:1.5em 0; margin:0 auto; color:#999; text-align:center; border-top:2px solid #333; position:fixed; width:100%}
#footer p {color:#999}
#footer h3 {margin:0;padding:0 0 .4em 0; border-bottom:none; color:#999}
I have no idea how this works, but it does for me, at least:
#wrapper {
margin-right:-999em;
}
To:
#wrapper {
margin-right: -99999em;
}
Your example stared working around -1080em, so I assume the margin-right determines it's maximum width. I put it as -99999em because that seemed sufficiently large, you can increase it.
I am retrieving a bulk images through response and I need to arrange them inside a div tag and all the images are placing one below the other but I need to arrange them vertical (i.e. side by side)
So how do I do that?
And I followed this tutorial but I can arrange only text?
http://phrogz.net/CSS/vertical-align/index.html
Can anyone suggest me the right way?
Here is my code:
$('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" +
file.target_name + "' target='_blank' rel='gallery'><img src='thumbs/" +
file.target_name + "' border='0'/></a> </div>");
Here is what I'm getting the result
Plupload Css:
/*
Plupload
------------------------------------------------------------------- */
.plupload_button {cursor: pointer;}
.plupload_wrapper {
font: normal 11px Verdana,sans-serif;
width: 100%;
}
.plupload .plupload_container input {width: 98%;}
.plupload .plupload_filelist_footer {border-width: 1px 0 0 0}
.plupload .plupload_filelist_header {border-width: 0 0 1px 0}
div.plupload .plupload_file {border-width: 0 0 1px 0}
div.plupload div.plupload_header {border-width: 0 0 1px 0; position: relative;}
.plupload_file .ui-icon {
cursor:pointer;
}
.plupload_header_content {
background-image: url('../img/plupload.png');
background-repeat: no-repeat;
background-position: 8px center;
min-height: 56px;
padding-left: 60px;
position:relative;
}
.plupload_header_content_bw {background-image: url('../img/plupload-bw.png');}
.plupload_header_title {
font: normal 18px sans-serif;
padding: 6px 0 3px;
}
.plupload_header_text {font: normal 12px sans-serif;}
.plupload_filelist,
.plupload_filelist_content {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.plupload_cell {padding: 8px 6px;}
.plupload_file {
border-left: none;
border-right: none;
}
.plupload .ui-sortable-helper,
.plupload .ui-sortable .plupload_file {
cursor:move;
}
.plupload_scroll {
max-height: 180px;
min-height: 168px;
_height: 168px;
overflow-y: auto;
}
.plupload_file_size, .plupload_file_status {text-align: right;}
.plupload_file_size, .plupload_file_status {width: 52px;}
.plupload_file_action {width: 16px;}
.plupload_file_name {
overflow: hidden;
padding-left: 10px;
}
.plupload_file_rename {
width:95%;
}
.plupload_progress {width: 60px;}
.plupload_progress_container {padding: 1px;}
/* Floats */
.plupload_right {float: right;}
.plupload_left {float: left;}
.plupload_clear,.plupload_clearer {clear: both;}
.plupload_clearer, .plupload_progress_bar {
display: block;
font-size: 0;
line-height: 0;
}
.plupload_clearer {height: 0;}
/* Misc */
.plupload_hidden {display: none;}
.plupload_droptext {
background: transparent;
text-align: center;
vertical-align: middle;
border: 0;
line-height: 165px;
}
.plupload_buttons, .plupload_upload_status {float: left}
.plupload_message {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.plupload_message p {
padding:0.7em;
margin:0;
}
.plupload_message strong {
font-weight: bold;
}
plupload_message i {
font-style: italic;
}
.plupload_message p span.ui-icon {
float: left;
margin-right: 0.3em;
}
.plupload_header_content .ui-state-error,
.plupload_header_content .ui-state-highlight {
border:none;
}
.plupload_message_close {
position:absolute;
top:5px;
right:5px;
cursor:pointer;
}
.plupload .ui-sortable-placeholder {
height:35px;
}
I believe what you want is float: left; on your images.
Functioning example: http://jsfiddle.net/NeMDZ/2/ (Try moving the middle divider. Flexible layout is optional.)
The basic CSS:
div.imgContain {
overflow:hidden; /* Only necessary if you need to style the containing box.
Forces box to expand to content's height. */
}
div.imgContain img {
float:left;
}
All the other CSS is optional. Style at will.
img {
display: inline-box;
}
The images will set in the same line as long they fit there. Be very careful with padding and margin values.
Images are block-level elements by default, so you will need float: left on your images (or whatever element your image is contained in) if you want them to be side-by-side. If you want to start a new line, create a spacer element like:
.spacer {
clear: both;
}
and then add <div class="spacer"></div> where you want to break a line of images and start a new one. You may need other attributes on your spacer to work in old browsers.