I've been working on this site http://minta.jvsoftware.com/ and I have a problem in FF/Linux, everything looks fine but the search button is showing at the bottom of the search box, I assume it's because the spacing of the elements in the top bar are too wide and since they're all floated to the left it jumps to the bottom for lack of space.
The problem is I can't debug properly since I don't have a linux distro available for testing (I used browsershots) so I was wondering if anyone on linux could point me in the right direction, I'm almost sure that if I reduce the right margin on the address it'll fix but I'm not sure by how much.
Thanks in advance!
The best way to make a horizontal menu that has a minimum of cross-browser hassles is to use the following pattern:
<div class="menu">
<ul>
<li>SOME TITLE</li>
<li>link1</li>
<li>2</li>
<li><input type="text" .../></li>
<li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>
CSS:
.menu ul, .menu li {
list-style=type:none;
padding:0;
margin:0
}
.menu li {
display:inline-block
}
.menu a {
display:block;
....other styles....
}
You started off this way in your menu for the store hours, then half-way you went to DIVs.
If you continue this pattern using <li> to wrap each item in your menu you'll find that things will work out fine.
Well the main issue was that I wasn't setting the text input's width in the css so the browser was rendering it with the default settings making it too large, but will definitely keep in mind Diodeus solution on using li instead of p tags for this kind of stuff.
Related
I tried to make a responsive card layout with even gap between each card , unfortunately bottom space not coming on card, but right side gap showing , can any one help how to achieve this scenario. below is my code
Html Code
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
<mat-card *ngFor="let member of members" fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" >
stack-blitz link
https://stackblitz.com/edit/card-responsive?file=app/card-overview-example.html
The problem seems to be the fxLayout="row wrap" functionality. the suggestion from the doc says to use fxLayoutGap="10px grid"but this works even less.
I have come up with this css3 which solved your problem. not very elegant, flex-layout-wise but this seem like a limitation
mat-card.mat-card {
margin-bottom: 10px;
}
I have a website which has to be working on all browsers. I am designing a menu like the below image
I made this menu by using the following html and css code
Html
<ul class="menu">
<li><img src="images/ico1.png" alt="home"><span>Home</span></li>
li><img src="images/ico2.png" alt="products"><span>Products</span></li>
<li><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></li>
<li><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></li>
<li><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></li>
</ul>
Css
.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}
It works perfectly in chrome, Ie9, firefox etc. But when i check in Ie8 the menu is collapsed like the below image
How do i rectify this error?
don't have ie8 at my disposal currently, but after looking # your markup/styles here are my thoughts:
1. the misalignment is more than likely margin-padding issues...looks like there is not enough room for the spans on the same line as the icon, and this break is amplifying it because once the spans are pushed off that line, they have margin-top declared, which is just pushing them farther away.
You have a few options here: 1st of all, target the menu in IE8 with conditional comments; illuminate the involved elements (i like to use contrasting bgs/borders/etc., whatever makes each element stand out from the group) and inspect them in F12...if the answer(s) isn't obvious off the bat, start comparing physical pixel sizes to another browser. So if you use Chrome in this case...you can find an element's dimensions by hovering over if Developer Tools are open...how does Chrome's size(s) compare to IE8's size(s)? If they sizes are not disparate, repeat this process for the same elements, only checking positioning, layout, padding, and margins. (# least) One of these should not match up to the other browser. You're going to want to compensate for the user agent rendering differences, and this is achievable using the conditional comments we've already used to target the menu. So lets pretend that all the li elements are vaguely 130px wide...if you notice that they're only 115px in IE, apply 15 more pixels of width to IE8 and only IE8 via the cc's.
i'm rambling bc i suck, but i'll try and wrap this up...your markup example is missing an opening bracket on the second li, prolly want to fix that first before you do anything else.
ditch the padding on the lis. also, apply display:inline to them and make your anchors display:block; float:left...that's a super easy to way to get rid of and/or test margin/padding issues.
i'd also place the icon into the a as background-images...that's me being particular, but that's actually a solution to your problem too...the spans can't collide with the imgs if there are no more img elements in the markup.
another possible easy solution here: the spans are floating left and applying a left margin...simply having the float:right could be a solution; floating them right and ditching the margin-left would be my second attempt, if simply float:right didn't resolve it.
I'm trying to get a bottom tab bar in Xpages Mobile controls. It's typically black with dark icons and the page changes has you press an icon.
I couldn't figure out how to get the look and feel with the actual Mobile Controls Tab bar. That seems geared for segmentedTabBar rather then I guess standard Tab bar. I tried to access Dojo manually with the code below and I got the look and feel but the tab bar is showing at the top and not the bottom of the screen.
I'd rather use the mobile controls version but regardless I'm easy. I'd love to get a bottom tab bar working in XPages.
Any advice would be appreciated.
<xe:singlePageApp id="singlePageApp1" selectedPageName="home">
<xe:appPage id="appPage1" pageName="home">
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/Add_32x32.png",
selected:true'>
Featured
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/1_48x48.png"'>
Categories
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Top 25
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"Add_32x32.png"'>
Search
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Updates
</li>
</ul>
</xe:appPage></xe:singlePageApp></xp:view>
Look in the Extension Library book from IBM Press on page 295. This chapter on Tab Bar contains an example of an action bar at the bottom of the screen:
<xe:tabBar id="tabBar1">
<xe:tabBarButton id="tabBarButton1" label="Button 1"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton2" label="Button 2"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton3" label="Button 3"></xe:tabBarButton>
</xe:tabBar>
It appears only to be a segmented tab bar if you use barType="segmentedControl".
I am trying to accomplish the same thing myself. I suspect the issue is caused because the XPages Mobile Controls do not yet support a Mobile Scrollable Pane which would allow for the positioning of fixed size (scrollable) content between the header and the footer. The css will most likely used absolute positioning of the tab bar to prevent it scrolling with the content. But when that has been accomplished you are going to need to implement some form of scrollable pane t stop the main content from scrolling over/under the toolbar.
The following CSS works "most" of the time but I found it is sometimes reluctant to snap into the correct location.
.rpTabBar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
height: 50px;
margin-top: -50px;
clear: both;
}
After looking at the dojo examples I have noticed the examples of the navbar remaining fixed at the bottom use the scrollableView control. The XPages appPage control is based on the standard view control. All of those examples seem to have the navBar float at the base of the content. After trying for a few weeks, I can see why. It seems next to impossible to get the navBar to stick to the bottom when using this control.
We haven't found a way yet to implement scrollableView without throwing away all the Xpages mobile controls. Instead we created a div inside each appPage that implements the dojo scrollablePane. Using this we can provide control ids for a fixed header and a fixed footer. And the navBar now sticks nicely at the bottom of every page.
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
I have div containing multiple divs and text. The inner divs are alternately floated left and right and the text flows along side them in all browsers (including IE8) except for IE7. In IE7 the text is pushed to the bottom so that it is aligned with the top of the final inner div. I have tried all sorts of solutions and have read a good article on the subject
However, I'm still unable to prevent the text from being cleared in IE7. Here's the relavent HTML (please note this div is nested within an HTML table with a specified width as it is a legacy site. I have tried pulling the div out of the table, but the same behaviour occurs anyway):
<div>
<div class="left"></div>
<div class="right"></div>
Text goes here
<br />
Text goes here
</div>
And CSS:
.left { float:left; }
.right { float: right;}
I have tried applying display:inline, display: inline-block, clear: none, overflow: hidden, specifying widths, position: relative to the containing div, various hacks such as IE7 conditional with zoom: 1, min-width: 1% - basically hours of pulling my hair out and dredging Google for answers but I haven't found anything that works. Has anyone encountered this problem before and got a fix for it?
(for testing i am running IE8 in compatability mode in Vista)
I am sure of the headaches that IE7 brings. Thank God that it is much better than IE6, but it was a headache for me in many situations.
In this case I recommend that you generate IE7 specific code using tables!