|
HTML - Webpage Appears Differently In Forefox
Hi
I have a problem with a page that i have just created. It looks great in explorer but when i open it with firefox, chrome ans safari it doesn't look that good anymore. Tables are not aligned the way they are supposed to be and pictures are not in their places.... What is the problem?? Thanks a lot for all the help Best, B Similar TutorialsGood morning! I have a new website, shopcheesecakery.com, and I've written html code for years on forums, and as an ebay seller. I jsut can't figure out this new problem, though On the website, when I upload the index.html file through the ftp client, the page appears as raw code. I have pasted the info onto my ebay me page, and it works fine. Into several html practice pads online, it works fine. Into an ebay listing, it works fine. My hosting company says it's a problem with my code, but I just don't see how that can be, since it works elsewhere. They say they are unable to help, and sent me off with a "good luck!" HELP!!!!!!!!! Sorry if i posted this in the wrong location. So im a real estate agent making a website. Im no pro and most of the stuff ive been using to build has been through layouts/generators/help of others such as yourselves. So ive been stuck on finding/making this code for the past couple of days. So all my listings are on my agencys website, not my personal agent website. Is there a code i could have where in the listings page my my personal agent website, i could have a window maybe 600x900 of the listing page on my agencys website? To kind of clear things up, you know how when you google something you have the magnifying glass, how it gives that preview. How can i have that preview coded onto a webpage, but me say what webpage to preview and how big to make the preview box? Tried to explain it as best i could. If you dont know the code, if you can tell me what its called so i can try to narrow the google searches. So far everything that has been coming up in the search restults has been preview boxes to preview html codes you have already written. Fail Blog Thanks This is probably somethign simple but I have spent hours trying to figure it out and I just can't. Look at this page: http://69.63.144.35 In Firefox, it's perfect. In IE, you will notice that the table to the right shifts down a little bit. No matter what, I cannot seem to get these lined up in IE. Why would firefox show them aligned and IE not? Any ideas? piratesholdem.com I'm trying to put in an iFrame in the center from which the rest of the site revolves, but even though it appears, it doesn't fill up the whole box/cell. The whole site is arranged with tables . Here's the code so far. <td width="576" rowspan="11"><p align="center"> <iframe src="News.htm" name="Name" width="100%" height="100%" align="top"></iframe> Hi everyone, I've just designed a site for a friends parents, im not great with this kind of stuff but they are absolutely useless with computers so there is no point in asking them how they designed the site originally. It appears it was done as some kind of wordpress site, when i view the source I get... "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Generated by Avanquest Technology v:7.1. For information please visit: http://www.avanquestusa.com/ -->" ...however this is where the issue lies. When I log into the site on my FTP client nothing is there, there are no files or webpages or anything on there yet the site is still working, even when I try and upload my "index.html" file it doesnt cause the site to stop working and be replaced by mine. Is it possible for me to delete the old site completely so that I can upload the new one via FTP? Many thanks in advance for the replies! Hi, I saw uses a skill to provide a greater depth of informations as users browse for movies. When a customer hovers over the graphic for a movie, the movie ID is sent to their central servers, and a bubble appears that provides more details about the movie. Again, the page is not refreshed, and the specifics for each movie aren't found in hidden form fields. This approach allows Netflix to provide more information about its movies without cluttering its pages. Now I am maintaining a web site which hosts on a H-Sphere panel. I want to adopt this way in my website. Could you please provide me any idea? Thanks First of all, thanks for taking the time to read. I've relatively no experience with web design, and so I'm trying to figure things out myself. It's worked so far with the exception of this little issue: I've downloaded an HTML template from a site and have tampered with it in Notepad for a bit. As the subject says, I'm having trouble displaying an image using IE9 while the image in questions appears properly using Firefox. I've looked up a few possible reasons so far and none of them seem to be the cause for the problem. I've checked that the dimensions for the picture in question are not in the code, which I've heard is sometimes a problem with IE while Firefox avoids that altogether. In either case, I've made sure the picture I'm replacing in the template is the same size in pixels. Second, I've also made sure the .jpg is not saved in CKNY, and that it's in fact an RGB file. Before I go on further, please let me know what other info you might need to solve this and where I can post which parts of the code you might need. Thanks again! Hello I thought my site was good to go until I viewed it on a pc. I took a look at it in IE on a pc and noticed outlines around the graphic nav. Do I need to add a bit of code somewhere? I'm attching a screenshot and below is my url to the site. thanks! http://www.bru.us.com html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BRU</title> <link rel="stylesheet" type="text/css" href="bru.css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "nav/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div id="header"> <img src="images/global/logo_gold.gif" /> </div> <div id="navigation"> <IMG SRC="nav/design.gif"/><br> <a href="tg_moodboard.html"class="catlink">TowerGroup</a><br> <a href="cbuy_moodboards.html"class="catlink">Click&Buy</a><br> <a href="mca_home.html"class="catlink">MCA</a><br> <a href="incretin_home.html"class="catlink">Incretin Forum</a><br> <a href="fifa.html"class="catlink">FIFA World Cup</a><br> <a href="psr.html"class="catlink">PSR</a><br> <a href="baraclude_banner.html"class="catlink">Baraclude</a><br> <a href="forest.html"class="catlink">Forest</a><br><br> <IMG SRC="nav/other.gif"/><br> <a href="divided.html"class="catlink">Divided</a><br> <a href="india_photos.html"class="catlink">Photography</a><br><br> <a href="about.html"> <img src="nav/about1.gif" name="about" onMouseOver="over(0)" onMouseOut="out(0)"> </a><br> <a href="contact.html"> <img src="nav/contact1.gif" name="contact" onMouseOver="over(1)" onMouseOut="out(1)"></a><br> </div> <div id="subnav"> <ul> <li><a href="tg_moodboard.html">Mood Boards</a></li> <li><a href="tg_direction_a.html">Home A</a></li> <li><a href="tg_direction_b.html">Home B</a></li> <li><a href="tg_sublevel.html">Sublevel</a></li> </ul> </div> <div id="portfolio"> <IMG SRC="images/towergroupmarketing/tw_moodboard.jpg"/>     </div> <div id="description"> <h1>TowerGroup / Moodboard</h1> <p> When TowerGroup came to us and talked about what they felt differentiated them from other financial institutions, one thing that stood out to me, was that they wanted to communicate that they're analysts are hands-on and accessible. To express this concept in a website, I thought mixing hand-drawn illustrations with photographs would help give the site a more personable feel. </p> </div> <!--Content--> <div style="position:absolute; top:474px; left:499px;"></div> </body> </html> css: body { font-family: sans-serif; background-color: #ffffff; font-size: 11px; margin: 0px; } #description { background: #ffffff; font-family: sans-serif; padding: 10px; line-height: 14px; margin: 0px 10px 10px 20px; } #portfolio { background: #ffffff; padding: 3px; margin: 0px 10px 10px 10px; } #header { position: absolute; top: 0px; background-color: #ffffff; margin: 20px; height: 80px; padding: 10px; } #subnav { background: #ffffff; padding: 0px; margin: 0px 0px 0px 0px; line-height: 10px; } #navigation { background: #ffffff; padding: 10px; margin: 0px 10px 10px 20px; } h1 { font-size: 16px; font-family: sans-serif; line-height: 24px; color: #000000; margin: -1px 0px 0px 0px; padding:0; } p { margin: 0px; padding: 0px; } a:link { font-family: sans-serif; font-size: 11px; color: #5b5b5b; text-decoration: none; line-height: 11px; font-family: arial, serif; } a:visited { font-family: sans-serif; color: #5b5b5b; font-size: 11px; text-decoration: none; line-height: 11px; font-family: arial, serif; } a:hover{ font-family: sans-serif; color:#C1A62E; font-size: 11px; text-decoration: none; background-color: line-height: 11px; font-family: arial, serif; } a.catlink:link { font-family: sans-serif; color: #5b5b5b; font-size: 11px; line-height: 14px; margin:0; padding:0; font-family: arial, serif; } a.catlink:visited { font-family: sans-serif; color: #5b5b5b; font-size: 11px; line-height: 14px; margin:0; padding:0; } a.catlink:hover { background-color:#C1A62E; font-family: sans-serif; color: #C1A62E; font-size: 11px; line-height: 14px; margin:0; padding:0; } .navheader1 { color: #C1A62E; font-size: 12px; line-height: 19px; margin:0; padding:0; } .navheader2 { color: #5b5b5b; font-size: 11px; line-height:17px; font-family: Georgia, "Times New Roman", Times, serif; margin: 20px 20px 30px 0px; padding:0; } a1:link { color: #5b5b5b; font-size: 11px; line-height:17px; font-family: Georgia, "Times New Roman", Times, serif; margin: 20px 20px 30px 0px; padding:0; } ul { margin: 0 0px 0 0; padding: 17px 10px 10px 2px; } li { display: inline; margin: 0 8px 0 0; padding: 0 0 0 10px; background: url(images/global/icon_asterisk.gif) no-repeat center left; } #description { position: absolute; top: 125px; left: 140px; width: 270px; } #navigation { position: absolute; top: 125px; width: 110px; } #subnav { height: 30px; position: absolute; top: 125px; margin-left: 475px; width: 3200px; } #portfolio { position: absolute; top: 160px; margin-left: 475px; width: 3400px; } Hi, I've been making a website but have only been testing it in Internet explorer, now I've tried opening it in Firefox and noticed alot of problems. When I open it in IE, there is about a 4-5mm gap at the top before the header appears andeverything is positioned fine because I have layed it out this way, but in Firefox the gap at the top doesnt exist and therefore everything is a few millimeters out of position (text, images etc). Is there anyway that I can get rid of this gap at the top of the IE page so that it looks the same? I have tried margin-top with no luck. CSS code: Code: /*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/
body
{
background: #000000;
color: white;
}
div#site
{
display: block;
color: #000000;
margin-top: -10px;
}
/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */
#header
{
background: url(images/header2.gif);
width: 865px;
height: 143px;
}
/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/
#header .text
{
position:relative;
top:42px;
left:322px;
word-spacing: 24px;
font-size: large;
}
/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/
div#navbar2 {
width: 70%;
border-top: solid #000 0px;
border-bottom: solid #000 0px;
background-image: url(images/button.gif);
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/
div#navbar2 li a {
text-decoration: none;
margin: 20px;
padding: 7px 15px;
color: #FFFFFF;
}
div#navbar2 li a:visited {
color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/
}
div#navbar2 li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/
}
/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/
#content
{
background: url(images/content.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
#content_nobars
{
background: url(images/content_nobars.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/
#content .title
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:215px;
width:500px;
height:18px;
overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
/*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}
#content .text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 255px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title2
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:375px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text2
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 415px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title3
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:541px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text3
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 580px;
width:500px;
height:80px;
overflow:hidden;
}
#content .read_more
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 168px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more2
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 318px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more3
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 468px;
width:100px;
height:16px;
overflow:hidden;
}
#content_nobars .about_us_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 425px;
width:550px;
height:250px;
overflow:auto;
}
#content_nobars .other_title
{
color: #000000;
font-size:24px;
text-decoration:underline;
position:absolute;
text-align:center;
left:510px;
top:200px;
width:500px;
height:30px;
overflow:hidden;
}
#content_nobars .other_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 250px;
width:550px;
height:432px;
overflow:auto;
}
#content_nobars .about_us_picture
{
background: url(images/1.jpg);
width: 290px;
height: 175px;
position:relative;
left:130px;
top:50px;
}
/*The footer code defines the location of the footer image, and the size of it.*/
#footer
{
background: url(images/footer.gif);
width: 870px;
height: 105px;
}
/*These 2 commands keep URL links coloured black, before and after they have been visited.*/
a:link { color:black }
a:visited { color:black }
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file which will be used to create the layout and look of the website.--> <head> <title>Pampered Pooches Grooming</title> <link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css"> </head> <!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.--> <body> <div id="site"> <div id="header"> </div> <div id="navbar2"> <ul> <!--This code creates a list of the navigational links to other pages of the website--> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html ">About Us</a></li> <li><a href="services.html ">Services</a></li> <li><a href="theparlour.html ">The Parlour</a></li> <li><a href="dogofthemonth.html ">Dog of the Month</a></li> <li><a href="contactus.html ">Contact Us</a></li> </ul> </div> <div id="content"> <!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.--> <div id="footer"> </div> </div> </body> </html> Thanks for any help. Please take a look at this page: http://lifeengineering.org/ Try out the menu links and see what I'm talking about. The "short" pages shift horizontally. In other words, if the div block with the content doesn't reach the bottom of the browser window, then it's rendered in a different horizontal position. So, changing the pages through the menu makes the pages appear to "jump". NOTE: You'll need a reasonably big resolution to see what I'm talking about (e.g. 1152 x 864+). Any suggestions on how to correct this? Is there a way to pad blank spaces at the end of my content in the div block to ensure that it always reaches the end of the browser window? Or something similar? ------ Issue #2: My background isn't ideal. I like the rainbow, but I'd like to change it. If I wanted to make the rainbow arc appear stationary as I scroll the page (i.e. to have the upper left arc of the rainbow always appear on the upper left corn of the screen), how would I do it? Any other suggestions, artistically, with respect to the page background? Thank you kindly! Hi, I am creating a page with a navbar. The navbar have few buttons which are clustered towards left of the bar. This shows correctly in the dreamweaver; but the buttons are completely spread out in the browser view. Please help me to correct this problem Quote: <table align=center border=0 cellpadding=0 cellspacing=0> <tr> <td colspan=3 align=center > <img src="Graphics/myhotdrinks.jpg"> </td> </tr> <tr bgcolor="#000000"> <td> <table class="navbar" width="724" > <tr> <td width="52" style="max-width:5px"> <a href="index.asp"> <font face="Arial, Helvetica, sans-serif" >Home </font> </a> </td> <td width="74" style="max-width:5px" > <a href="products.asp"> <font face="Arial, Helvetica, sans-serif" > Products</font> </a> </td> <td width="67" style="max-width:5px" > <a href="contactus.asp"> <font face="Arial, Helvetica, sans-serif" > About us</font> </a> </td> <td width="69" style="max-width:5px" > <a href="register.asp"> <font face="Arial, Helvetica, sans-serif" > Register</font> </a> </td> <td width="438"></td> </tr> </table> </td> </tr> Regards, John I am new at al of this and I just stood up a site and thought everything was going well, it looked great, I validated the code, life was good. until I looked at it in IE. It's WAY messed up! Its got horizontal and vertical scroll bars IN the page, and the tabs I made don't look quite like they are supposed to. I have no Idea how to fix it, I am hoping someone on here can look at my page in IE and look at my code and help me out here. my site is http://pughs.no-ip.org to look at it, and I will post my code he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Pugh's World - Freedom of Information
</title>
<link rel="stylesheet" href="default.css" type="text/css" />
<link rel="shortcut icon" href="i.jpg" type="image/x-icon" />
<script type="text/javascript" src="klappe.js"></script>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" style='background: transparent'>
<tr>
<td class="clear" width='49%' >
</td>
<td class="clear" align="center">
<a href="/"><img alt="Pugh's World" src="ilogo.jpg" border="0"/>
</a>
</td>
<td class="clear" width="49%" align="center">
</td>
</tr>
</table>
<div align="center">
</div>
<!--TABS-->
<table class="mainouter" width="94%" border="1" cellspacing="0" cellpadding="10" align="center">
<tr>
<td class="outer" align="center">
<ul id="tabnav">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="blog.html" >Blog</a></li>
<li><a href="about.html" >About</a></li>
</ul>
<!--MAIN TABLE HEADER-->
<table cellpadding="4" cellspacing="1" border="0" style="width:737px" align="center">
<tr>
<td>
<table style="width:100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bottom" align="left">
<span class="smallfont">
Welcome to Pugh's!
<br/>
<font color="blue">Last Blog Post:</font> <font color="darkred">(never)
</font>
<br />
</span>
</td>
<td class="bottom" align="right">
<br />
</td>
</tr>
<!--CONTENT TABLE-->
<tr>
<td class="bottom"><br /><b>Site is Back Up!</b> - 8-21-2008 18:55:34
</td>
</tr>
<tr>
<td class="bottom">
<table class="main" border="0" cellspacing="0" cellpadding="0" style="width:100%">
<tr>
<td class="text">
<p>Well, so far there is absolutely no content, but at least we are back up!<br />
</p>
<h1>Check back for updates!
</h1>
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br /><br />
</td>
</tr>
</table>
<p class="footer">
©2008 John Pugh
</p>
</body>
</html>
I just notices something strange about my site: I typically use firefox, so I never noticed it before. http://arcadefreedom.com in firefox, everything displays fine, but in ie... look at the stats boxes on the right (purple), there is a space between the title and the body of each stats box that doesnt appear in firefox. I've tried everything I can think of (and I'll be the first to admit i'm not all that great in html) to get rid of that space in IE... valign, cellspacing, cellpadding... Any ideas? Thanks! Hi. I just had my dad download the Opera web browser and I was checking on a website I did with all black tables... the tables are unseen when viewed on Mozilla or IE but when I look at the page on Opera the tables show up and are grey bordered. Is this just an error with Opera's code reading or is there something I can be doing to prevent it? the site is www.spmstudio.com Thanks! Hey guys, hope someone can help. I have a website that is displaying correctly in FF 3.05 but incorrectly in IE7 If you look at this page in FF and then IE you will see the problem... http://www.debt-rescued.co.uk/applynow.html Hope someone can help Hello. Im beginner in html. I have icon and when i click on it, a link will open. I would allso like to do this: when mouse is on the icon - a textbox will appear with a text "NEW product!". The Textpox shoud not be any larger that the text itself and i like to know how to position the textbox. I hope it should be simple. Can someone please give me an example code? Thank u! Hello all, I'm new to the forum and to blogengine.net and i'm currently constructing a website for a charity event. All is going smoothly apart from one thing; the blog appears on every additional page i've created! Its using the standard theme, I cant find the code which causes this. How do I make each page static? I can provide any other information you may need. I've obviously already searched the site as well as google but surprisingly I couldn't find an answer! For example, here is the code copied from a page that was created, and since only had a banner added; _______________________________________________ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gallery.aspx.cs" Inherits="_gallery" %> <%@ Register Src="User controls/PostList.ascx" TagName="PostList" TagPrefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphBody" Runat="Server"> <img src="http://www.400in4.co.uk/content/pics/titleboxes/Gallery.jpg" alt=""/> <br /><br /> <div id="divError" runat="Server" /> <uc1ostList ID="PostList1" runat="server" /> <blogostCalendar runat="server" ID="calendar" EnableViewState="false" ShowPostTitles="true" BorderWidth="0" NextPrevStyle-CssClass="header" CssClass="calendar" WeekendDayStyle-CssClass="weekend" OtherMonthDayStyle-CssClass="other" UseAccessibleHeader="true" Visible="false" Width="100%" /> </asp:Content> _______________________________________________ anything there that would 'turn off' the blog showing on this particular page? Thanks in advance Dave http://www.eczaderm.com/ I have an iframe that is linked to source.html and that source.html has a swf gallery in it. As you can see in this example the top menu stays behind the flash gallery. I tried with giving iframe z-index:-1 but it didin't work. How can I fix this ? Ups I figured the solution that wmode must set to transparent . Thanks anyway |
|||||||